Implement Custom InsertSymbol Tool for Editor

Environment

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

Description

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

Solution

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">
    </textarea>

    <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>
      </select>
    </script>

    <script>
        $("#editor").kendoEditor({
          encoded: false,
            tools: [
                {
                    name: "customTemplate",
                    template: $("#insertSymbol-template").html()
                }
            ]
        });

        $("#templateTool").kendoDropDownList({
            change: function(e) {
                var inputValue = e.sender._inputValue();

                $('#editor').data('kendoEditor').exec("insertHtml", { html: inputValue });
            }
        });
    </script>