Add custom buttons
RichTextEditor lets you extend the editor with custom toolbar actions. This example shows how to create a new button and add it to the toolbar.
This example shows how to add a custom button to the toolbar.
Example code
<div id="div_editor1">
<p>This example shows how to add a custom button to the toolbar.</p>
</div>
<script>
var editor1cfg = {}
editor1cfg.svgCode_mybutton = '<svg viewBox="-2 -2 20 20" fill="#5F6368" style="width: 100%; height: 100%;"><path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" clip-rule="evenodd"></path></svg>';
editor1cfg.toolbar = "mytoolbar";
editor1cfg.toolbar_mytoolbar = "{bold,italic}|{forecolor,backcolor}|removeformat|mybutton"
+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
var editor1 = new RichTextEditor("#div_editor1", editor1cfg);
editor1.attachEvent("exec_command_mybutton", function (state, cmd, value) {
state.returnValue = true;//set it has been handled
console.log("my button clicked");
var p = editor1.insertRootParagraph("p");
p.innerHTML = "You clicked mybutton";
alert(p.innerHTML);
});
</script>Added the mybutton_b button - custom style
Example code
<div id="div_editor2">
</div>
<script>
var editor2cfg = {}
//define toolbarfactory_btnname to create your self button
editor2cfg.toolbarfactory_mybutton_b = function (cmd, suffix) {
var btn = document.createElement("button");
btn.innerHTML = "button_b"
btn.className = "ls-cta";
btn.style.cssText = "height:32px;margin:2px;padding:0px 5px";
btn.onclick = function () {
console.log("my button clicked");
var p = editor2.insertRootParagraph("p");
p.innerHTML = "You clicked mybutton_b";
alert(p.innerHTML);
return false;
}
return btn;
}
editor2cfg.toolbar = "mytoolbar";
editor2cfg.toolbar_mytoolbar = "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|mybutton_b"
+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
var editor2 = new RichTextEditor("#div_editor2", editor2cfg);
</script>