Is RTE have syntax highlighter?
Description
Currently we haven’t provided with in-built support for syntax highlighter in RTE. However, this can be achieved using some third party tools/plugins that will allow you to highlight the code blocks.
Solution
In below sample, we have used CodeMirror plugins to highlight HTML, Javascript and CSS using custom tool. Add the CodeMirror references to the script section as follows.
Javascript
<script src="14.2.0.28/scripts/web/codemirror/codemirror.js" type="text/javascript"></script> <script src="14.2.0.28/scripts/web/codemirror/javascript.js" type="text/javascript"></script> <script src="14.2.0.28/scripts/web/codemirror/css.js" type="text/javascript"></script> <script src="14.2.0.28/scripts/web/codemirror/xml.js" type="text/javascript"></script> <script src="14.2.0.28/scripts/web/codemirror/htmlmixed.js" type="text/javascript"></script> <link href="14.2.0.28/scripts/web/codemirror/codemirror.min.css" rel="stylesheet" /> |
Render the RTE control, use “customTool” options to add the “div” in the Toolbar.
Javascript
<textarea id="rteSample" rows="10" cols="30" style="width: 740px; height: 440px"> Description: The Rich Text Editor (RTE) control is an easy to render in client side. Customer easy to edit the contents and get the HTML content for the displayed content. A rich text editor control provides users with a toolbar that helps them to apply rich text formats to the text entered in the text area. </textarea> <div id="cutomSourceCode" title="Paste you code and inset to RTE"> <table> <tr> <td style="width: 100px"> Select type : </td> <td> <div> <select id="languageList"> <option value="javascript">Java Script</option> <option value="text/html">HTML</option> <option value="css">CSS</option> </select> </div> </td> </tr> <tr> <td colspan="2"> <textarea id="srcCode" style="width: 550px; height: 250px"> <div id="srcArea"></div> </textarea> </td> </tr> <tr> <td colspan="2"> <div class="e-rte-button e-fieldseparate"> <button id="src_insert" class="e-rte-btn" tabindex="">Insert</button> <button id="src_cancel" class="e-rte-btn" tabindex="">Cancel</button> </div> </td> </tr> </table> </div> |
<script type="text/javascript" class="jsScript"> var rteObj; $(function () { //Render the RTE control $("#rteSample").ejRTE({ toolsList: ["customTools"], width:"100%", minWidth:"100px", tools: { customTools: [{ name: "codeInsert", tooltip: "Insert code snippets ", css: "codeInsert", text: "codeInsert", action: function () { $("#srcCode").val("").show(); $("#cutomSourceCode").ejDialog("open"); $("#srcCode").focus(); } }] },isResponsive:true }); //Add text for custom tool bar element. $("div.codeInsert").html("Insert code"); //load the CodeMirror css in the iframe $("#rteSample_Iframe").contents().find("head").append($("<link href='../scripts/CodeMirror/codemirror.min.css' rel='stylesheet'></link>"));
rteObj = $("#rteSample").data("ejRTE"); $("#cutomSourceCode").ejDialog( { enableResize: false, enableModal: true, showOnInit: false, width: "auto", position: { X: 218, Y: 38 } }); $("#languageList").ejDropDownList().ejDropDownList("option", "selectedItemIndex", 0); $("#cutomSourceCode").find(".e-rte-btn").ejButton({ click: "customBtnClick" }); }); </script> |
Upon click to the “div” element, the “Dialog” control will be open. From that insert any HTML, CSS or JavaScript syntax to the RTE.
The syntax has been inserted to the RTE using “executeCommand” method.
Javascript
function customBtnClick(args) { if (this._id == "src_insert") { var htmlEditor = CodeMirror.fromTextArea($("#srcCode")[0], { lineNumbers: false, mode: $("#languageList").val() }); var codeTags = $("#cutomSourceCode").find(".CodeMirror"); codeTags.find(".CodeMirror-cursor").remove(); rteObj.executeCommand("inserthtml", codeTags[0].outerHTML); codeTags.remove(); } $("#cutomSourceCode").ejDialog("close"); } |
