Edit this page

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy