RichTextEditor

Examples

Basic ExamplesEditor SizeInserting ContentDrag and DropTypingPluginsAPIs

Add custom dropDown

RichTextEditor lets you extend the editor with custom dropdown controls. This example shows how to add a new dropdown to the toolbar.

Menu drop down

This example shows how to add a custom dropdown to the toolbar.

Example code

<div id="div_editor1">
	<p>This example shows how to add a custom dropdown to the toolbar.</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 also shows how to create a panel-based dropdown.

Example code

<div id="div_editor2">
	<p>This example also shows how to create a panel-based 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

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

Related links