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:

    <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:

    <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:

    <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