Implement Custom InsertSymbol Tool for Editor

Environment

Product Progress Kendo UI Editor
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>
In this article
Not finding the help you need? Improve this article