RichTextEditor

Examples

Basic ExamplesEditor SizeInserting ContentDrag and DropTypingPluginsAPIs

Add custom dialog

RichTextEditor lets you extend the editor with custom dialogs. This example shows how to create a dialog and wire it into the toolbar.

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

Example code

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script type="text/javascript" src="/richtexteditor/rte.js"></script>
<script type="text/javascript" src='/richtexteditor/plugins/all_plugins.js'></script>

<div id="div_editor1">
	<p>This example shows how to add a custom dialog to the toolbar.</p>
</div>

<script>
	var editor1cfg = {}
	editor1cfg.svgCode_mydialog_a = '<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|mydialog_a"
		+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
	var editor1 = new RichTextEditor("#div_editor1", editor1cfg);

	editor1.attachEvent("exec_command_mydialog_a", function (state, cmd, value) {
		state.returnValue = true;//set it has been handled
		console.log("my button clicked");

		var editor = this;

		var dialoginner = editor.createDialog("Insert Paragraph", "rte-dialog-insertcode");

		var div1 = __Append(dialoginner, "div", "position:relative;text-align:center;");
		var textarea = __Append(div1, "textarea", "width:300px;height:200px")

		var divfooter = __Append(dialoginner, "rte-dialog-footer", null, "rte-dialog-footer-center");

		var btn = __Append(divfooter, "rte-dialog-button")
		btn.innerText = "Insert";

		setTimeout(function () {
			textarea.focus();
		}, 300);

		btn.onclick = function () {
			if (!textarea.value.trim())
				return;

			dialoginner.close();

			editor.selectDoc(false);

			var p = editor.insertRootParagraph()
			var ctag = __Append(p, "p");
			ctag.style.cssText = 'margin:12px;padding:12px;border:dashed 1px gray;';
			ctag.innerText = textarea.value;
			editor.focus();

			editor.selectDoc(false);
		}

	});

	function __Append(parent, tagname, csstext, cssclass) {
		var tag = parent.ownerDocument.createElement(tagname);
		if (csstext) tag.style.cssText = csstext;
		if (cssclass) tag.className = cssclass;
		parent.appendChild(tag);
		return tag;
	}
</script>

Related links