RichTextEditor Demo
Home Pricing

## JavaScript API

This example shows you how to use RichTextEditor JavaScript API to customize the application.

### 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' onclick="Do_Focus()">Focus</button>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    	<button class='btn btn-soft-primary btn-sm' 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