Examples

Add custom dialog

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

This example demonstrates how to create a custom dialog.

Demo 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 demonstrates how to create a custom dialog.</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>

Relative Links