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
- Set a template to the custom tool.
- 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>