Display Editor Custom Tools as a Button Group

Environment

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

Description

How can I display several custom tools as a button group in the Editor?

Solution

1. Set a template to the custom tool.
2. Apply the following HTML structure and classes to the content of the template.

    <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
    </textarea>

    <script type="text/x-kendo-template" id="template1">
        <a tabindex="0" onclick="button1Click()" role="button" class="k-tool k-group-start" unselectable="on" title="Button1" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-icon k-i-cog"></span><span class="k-tool-text">Button1</span></a><a tabindex="0" onclick="button2Click()" role="button" class="k-tool" unselectable="on" title="Button2" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-icon k-i-wrench"></span><span class="k-tool-text">Button2</span></a><a tabindex="0" onclick="button3Click()" role="button" class="k-tool k-group-end" unselectable="on" title="Button3" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-icon k-i-lock"></span><span class="k-tool-text">Button3</span></a>
    </script>

    <script>
        $("#editor").kendoEditor({
            tools: [
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "justifyLeft",
            "justifyCenter",
            "justifyRight",
            "justifyFull",
            {
                name: "customTemplate",
                template: $("#template1").html()
            },
            ]
        });

        function button1Click() {
            console.log("button1 clicked");
        }

        function button2Click() {
            console.log("button2 clicked");
        }

        function button3Click() {
            console.log("button3 clicked");
        }
    </script>