RichTextEditor Demo
Home Pricing

### Add custom buttons

Rich Text Editor allows you extend the functions of the editor. You can create new custom buttons and add them to the editor's toolbar list.

This example demonstrates how to create a custom button.

### Demo Code:

    import { createRichTextEditor, type RichTextEditorOptions } from "ts-rich-text-editor";

    const svgIcon = '<svg viewBox="-2 -2 20 20" fill="#5F6368"><path 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"></path></svg>';

    const config: RichTextEditorOptions = {
      svgCode_mybutton: svgIcon,
      toolbar: "mytoolbar",
      toolbar_mytoolbar: "{bold,italic}|{forecolor,backcolor}|removeformat|mybutton"
        + "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}",
    };

    const editor = await createRichTextEditor("#div_editor1", config, {
      basePath: "/richtexteditor",
    });

    editor.instance.attachEvent("exec_command_mybutton", function (
      state: { returnValue: boolean },
      cmd: string,
      value: any
    ) {
      state.returnValue = true;
      console.log("my button clicked");
      const p = editor.instance.insertRootParagraph("p");
      p.innerHTML = "You clicked mybutton";
      alert(p.innerHTML);
    });

    <div id="div_editor1">
    	<p>This example demonstrates how to create a custom button.</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

### Demo Code:

    import { createRichTextEditor, type RichTextEditorOptions } from "ts-rich-text-editor";

    const config: RichTextEditorOptions = {
      toolbarfactory_mybutton_b: function (cmd: string, suffix: string) {
        const btn = document.createElement("button");
        btn.innerHTML = "button_b";
        btn.className = "btn btn-primary";
        btn.style.cssText = "height:32px;margin:2px;padding:0px 5px";
        btn.onclick = () => {
          console.log("my button clicked");
          const p = editor.instance.insertRootParagraph("p");
          p.innerHTML = "You clicked mybutton_b";
          alert(p.innerHTML);
          return false;
        };
        return btn;
      },
      toolbar: "mytoolbar",
      toolbar_mytoolbar: "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|mybutton_b"
        + "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}",
    };

    const editor = await createRichTextEditor("#div_editor2", config, {
      basePath: "/richtexteditor",
    });

    <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 = "btn btn-primary";
    		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>

### Relative Links

- Use JavaScript API