RichTextEditor Demo
Home Pricing

## JavaScript API

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

### Demo Code:

    import { TypeScriptRichTextEditor } from "ts-rich-text-editor";

    const editor = await TypeScriptRichTextEditor.create("#div_editor1", {}, {
      basePath: "/richtexteditor",
    });

    editor.html = "<p>Hello World</p>";

    // Get and set text/HTML
    const text: string = editor.instance.getPlainText();
    const html: string = editor.html;
    editor.html = "<p>New content</p>";
    editor.instance.setPlainText("Plain text content");

    // Focus, exec commands, insert
    editor.focus();
    editor.exec("cut");
    editor.exec("copy");
    editor.instance.insertText("hello world");
    editor.instance.insertHTML("hello <b>world</b> !!");

    // Selection and collapse
    editor.instance.collapse(true);   // collapse to start
    editor.instance.collapse(false);  // collapse to end
    editor.instance.selectDoc(true);  // select doc start
    editor.instance.selectDoc(false); // select doc end
    editor.instance.selectDoc("all"); // select all

    // Insert elements
    const table = editor.instance.insertByTagName("table") as HTMLTableElement;
    table.style.cssText = "width:300px;border:solid 1px gray";

    const img = editor.instance.insertByTagName("img") as HTMLImageElement;
    img.src = "/assets/img/160x160/img27.png";

    // Insert image as new centered paragraph
    const rp = editor.instance.insertRootParagraph();
    rp.style.cssText = "text-align:center;";
    const newImg = rp.ownerDocument.createElement("img");
    rp.appendChild(newImg);
    newImg.src = "/assets/img/160x160/img27.png";

    <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