Examples

Code Snippets

This example shows you how to create a custom code snippets dropdown that allows you add predefined code snippets into the current selection.
Hello world!
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_editor2">
	<p>Hello world!</p>
	<p><img src='/images/editor-image.png' /></p>
</div>

<style>
	.code-snippet-item {
		padding: 5px;
	}

		.code-snippet-item:hover {
			background-color: #b6ff00;
		}
</style>
<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 = "Code Snippets";
			inp.style.overflowX = "hidden"
		}
		option.fillpanel = function (panel) {
			panel.style.padding = '8px'

			function CreateItem(name, code) {
				var div = panel.appendChild(document.createElement("div"));
				div.className = "code-snippet-item";
				div.innerText = name;
				div.onclick = function () {
					editor.insertHTML(code);
				}
			}

			CreateItem("Welcome", "<b>Welcome to our website.</b>");
			CreateItem("Copyright", "<b>Copyright (c) MyCompany. All right reversed.</b>");

		}

		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>