This example shows you how to use RichTextEditor JavaScript API to customize the application.
<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>