New to Kendo UI for jQuery? Download free 30-day trial

Implement Custom InsertSymbol Tool for Editor


Product Progress® Kendo UI® Editor for jQuery
Operating System All
Browser All
Preferred Language JavaScript


How can I add a custom InsertSymbol tool to the Editor?


  1. Set a template to the custom tool and initialize a DropDownList in it.
  2. In the change event handler of the DropDownList, call the exec API method of the Editor and execute the insertHtml command.
  3. Pass the selected symbol to the method in the DropDownList.
    <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">

    <script type="text/x-kendo-template" id="insertSymbol-template">
        <label for='templateTool' style='vertical-align:middle;'>Insert Symbol:</label>
        <select id='templateTool' style='width:90px'>
        <option value='1'>&copy;</option>
        <option value='2'>&sum;</option>
        <option value='3'>&euro;</option>
        <option value='4'>&trade;</option>
        <option value='5'>&larr;</option>
        <option value='6'>&uarr;</option>
        <option value='7'>&rarr;</option>
        <option value='8'>&darr;</option>

          encoded: false,
            tools: [
                    name: "customTemplate",
                    template: $("#insertSymbol-template").html()

            change: function(e) {
                var inputValue = e.sender._inputValue();

                $('#editor').data('kendoEditor').exec("insertHtml", { html: inputValue });
In this article