RichTextEditor Demo
Home Pricing

### Add custom dropDown

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

### Menu drop down

This example demonstrates how to create a custom dropDown.

### 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_menu_mymenu: svgIcon,
      toolbar: "mytoolbar",
      toolbar_mytoolbar: "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|menu_mymenu"
        + "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}",
      subtoolbar_mymenu: "inserttable,insertimage,insertcode",
    };

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

    <div id="div_editor1">
    	<p>This example demonstrates how to create a custom dropDown.</p>
    </div>

    <script>
    	var editor1cfg = {}
    	editor1cfg.svgCode_menu_mymenu = '<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}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|menu_mymenu"
    		+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
    	editor1cfg.subtoolbar_mymenu = 'inserttable,insertimage,insertcode';
    	var editor1 = new RichTextEditor("#div_editor1", editor1cfg);
    </script>

### Panel drop down

This example demonstrates how to create a panel dropDown.

### Demo Code:

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

    const config: RichTextEditorOptions = {
      toolbarfactory_mydropdown: function (cmd: string, suffix: string) {
        const editor = this;
        const option: any = {};
        let inp: HTMLElement;
        option.fillinput = (input: HTMLElement) => {
          inp = input;
          inp.innerText = "MyDropDown";
          inp.style.overflowX = "hidden";
        };
        option.fillpanel = (panel: HTMLElement) => {
          panel.style.padding = "8px";
          panel.innerHTML = "Hello<br/>World<br/>Gogo<br/>";
          const btn = document.createElement("button");
          btn.innerHTML = "button_b";
          btn.className = "btn btn-primary";
          btn.onclick = () => {
            editor.closeCurrentPopup();
            return false;
          };
          panel.appendChild(btn);
        };
        return editor.createToolbarDropDown(option, cmd, suffix);
      },
      toolbar: "mytoolbar",
      toolbar_mytoolbar: "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|mydropdown"
        + "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}",
    };

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

    <div id="div_editor2">
    	<p>This example demonstrates how to create a panel dropDown.</p>
    </div>

    <script>
    	var editor2cfg = {}

    	editor2cfg.toolbarfactory_mydropdown = function (cmd, suffix) {
    		var editor = this;//Use this, maybe editor2 variable is not ready yet.
    		var option = {};
    		var inp;
    		option.fillinput = function (input) {
    			inp = input;
    			inp.innerText = "MyDropDown";
    			inp.style.overflowX = "hidden"
    		}
    		option.fillpanel = function (panel) {
    			panel.style.padding = '8px'
    			panel.innerHTML = "Hello<br/>World<br/>Gogo<br/>";

    			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 () {
    				editor.closeCurrentPopup();
    				console.log("my button clicked");
    				var p = editor2.insertRootParagraph("p");
    				p.innerHTML = "You clicked mybutton_b";
    				alert(p.innerHTML);
    				return false;
    			}

    			panel.appendChild(btn)
    		}

    		var btn = editor.createToolbarDropDown(option, cmd, suffix)
    		return btn;
    	}
    	editor2cfg.toolbar = "mytoolbar";
    	editor2cfg.toolbar_mytoolbar = "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|mydropdown"
    		+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
    	editor2cfg.subtoolbar_mymenu = 'inserttable,insertimage,insertcode';

    	var editor2 = new RichTextEditor("#div_editor2", editor2cfg);
    </script>

### Select drop down

### Demo Code:

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

    const config: RichTextEditorOptions = {
      toolbarfactory_myselect: function (cmd: string, suffix: string) {
        const sel = document.createElement("select");
        sel.style.cssText = "height:32px;margin:2px;padding:0px 5px";
        function addOption(text: string, value?: string) {
          const option = document.createElement("option");
          option.innerText = text;
          if (value) option.setAttribute("value", value);
          (option as any).rawValue = value;
          sel.appendChild(option);
        }
        addOption("Select an item...");
        addOption("Red title", "red");
        addOption("Blue content", "blue");
        sel.onclick = (e: MouseEvent) => e.stopPropagation();
        sel.onchange = () => {
          const option = sel.options[sel.selectedIndex] as any;
          const val = option.rawValue;
          sel.selectedIndex = 0;
          editor.instance.insertHTML(
            "<span style='color:" + val + "'>You selected " + val + "</span>"
          );
        };
        return sel;
      },
      toolbar: "mytoolbar",
      toolbar_mytoolbar: "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|myselect"
        + "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}",
    };

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

    <h3>Select drop down </h3>
    <div id="div_editor3"></div>

    <script>
    	var editor3cfg = {}
    	editor3cfg.toolbarfactory_myselect = function (cmd, suffix) {
    		var sel = document.createElement("select");
    		sel.style.cssText = "height:32px;margin:2px;padding:0px 5px";
    		function addOption(text, value) {
    			var option = document.createElement("option");
    			option.innerText = text;
    			option.setAttribute("value", value);
    			option.rawValue = value;
    			sel.appendChild(option);
    		}
    		addOption("Select an item...")
    		addOption("Red title", "red");
    		addOption("Blue content", "blue");
    		sel.onclick = function (e) {
    			//the select will get focus , editor will lost focus
    			e.stopPropagation();//prevent editor get focus automatically
    		}
    		sel.onchange = function () {
    			var option = sel.options[sel.selectedIndex];
    			var val = option.rawValue;
    			sel.selectedIndex = 0;
    			editor3.insertHTML("<span style='color:" + val + "'>You selected " + val + "</span>")
    		}
    		return sel;
    	}
    	editor3cfg.toolbar = "mytoolbar";
    	editor3cfg.toolbar_mytoolbar = "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|myselect"
    		+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";

    	var editor3 = new RichTextEditor("#div_editor3", editor3cfg);
    </script>

### Relative Links

- Use JavaScript API