Examples

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" style="height: 260px"></div>
<script>
	var editor1cfg = {}
	var editor1 = new RichTextEditor("#div_editor1", editor1cfg);
	editor1.setHTMLCode("<p>Hello World</p>")
</script>
<br />
<p>
	<button class='btn btn-primary' onclick="event.preventDefault();Do_GetText();return false;">Get Text</button>
	<button class='btn btn-primary' onclick="event.preventDefault();Do_GetHTML();return false;">Get HTML</button>
	<button class='btn btn-primary' onclick="event.preventDefault();Do_SetHTML();return false;">Set HTML</button>
	<button class='btn btn-primary' onclick="event.preventDefault();Do_SetText();return false;">Set Text</button>
</p>
<p>
	<textarea id="ta1" class="form-control" rows="3"></textarea>
</p>
<br />

<div class="buttons">

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_Focus()">Focus</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_Exec('cut')">Cut</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_Exec('copy')">Copy</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_Delete()">Delete</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_InsertText()">Insert Text</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_InsertHTML()">Insert HTML</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_Collapse(true)">Collapse Start</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_Collapse(false)">Collapse End</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_SelectDoc(true)">Select Doc Start</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_SelectDoc(false)">Select Doc End</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_SelectDoc('all')">Select Doc All</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_CreateInsertNode()">CreateNode and Insert</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_InsertImage()">Insert Image</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_GetSelectionType()">Get Selection Type</button>

	<hr />
	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_InsertImageAsNewParagraph()">Insert Centered Image</button>

	<button class='btn btn-soft-primary btn-sm m-1' onclick="Do_toggleSubToolbar()">toggleSubToolbar</button>

</div>

<script type="text/javascript">

	function Do_GetText() {
		ta1.value = editor1.getPlainText();
		editor1.focus();
	}
	function Do_GetHTML() {
		ta1.value = editor1.getHTMLCode();
		editor1.focus();
	}
	function Do_SetHTML() {
		editor1.setHTMLCode(ta1.value);
		editor1.focus();
	}
	function Do_SetText() {
		editor1.setPlainText(ta1.value);
		editor1.focus();
	}

	document.onclick = function (event) {
		if (event.target.nodeName == 'BUTTON')
			event.preventDefault();
	}

	function Do_Focus() {
		editor1.focus();
	}

	function Do_Exec(name, val) {
		editor1.execCommand(name, val)
		editor1.focus();
	}

	function Do_Delete() {
		editor1.delete();
		editor1.focus();
	}

	function Do_InsertText() {
		editor1.insertText("hello world");
		editor1.focus();
	}

	function Do_InsertHTML() {
		editor1.insertHTML("hello <b>world</b> !!");
		editor1.focus();
	}

	function Do_Collapse(bstart) {
		editor1.collapse(bstart);
		editor1.focus();
	}

	function Do_SelectDoc(type) {
		editor1.selectDoc(type);
		editor1.focus();
	}

	function Do_CreateInsertNode() {
		var df = editor1.insertByTagName("table");
		df.style.cssText = "width:300px;margin:15px;border:solid 1px gray;background-color:wheat;border-collapse:collapse";
		df.innerHTML = "<tr><td></td></tr><tr><td>hello <b>world</b> !!</td></tr>"
		editor1.focus();
	}

	function Do_InsertImage() {
		var img = editor1.insertByTagName("img");
		img.style.cssText = "display:inline-block;margin:15px;padding:15px;border:solid 1px gray;background-color:wheat;max-width:200px";
		img.src = "/assets/img/160x160/img27.png";
		editor1.selectControl(img);
		editor1.focus();
	}

	function Do_GetSelectionType() {
		var ctrl = editor1.getSelectedControl();
		if (ctrl != null) {
			alert("control");
			return;
		}
		var text = editor1.getSelectedText();
		if (text != null) {
			alert("text");
			return;
		}
		alert("none");
	}

	function Do_InsertImageAsNewParagraph() {
		var rp = editor1.insertRootParagraph();
		rp.style.cssText = "text-align:center;"
		var img = rp.ownerDocument.createElement("img");
		img.style.cssText = "display:inline-block;margin:15px;padding:15px;border:solid 1px gray;background-color:wheat;max-width:200px";
		rp.appendChild(img);
		img.src = "/assets/img/160x160/img27.png";
		editor1.selectControl(img);
		editor1.focus();
	}

	function Do_toggleSubToolbar() {
		editor1.__toggleSubToolbar("more");
		editor1.focus();
	}

	editor1.getEditable().ownerDocument.addEventListener("selectionchange", function (event) {
		//console.log(event);
		//console.log(document.getSelection())
	})

</script>

Relative Links

• Use JavaScript API