Examples

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