tools.ui Object
Apart from the built-in tools, the Editor fully exposes the ToolBar.items API. This way you can specify any custom tools in the widget using the components available in the ToolBar itself.
All tools must have their name
specified. All custom tools with no name will have "custom" automatically assigned as their name. As a result only one of them will be placed in the Editor ToolBar.
Example - Custom tools via the ToolBar API
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
tools: [
{
name: "text-btn",
ui: {
type: "button",
text: "Button",
showText: "always",
icon: null
}
},
{
name: "toggle-btn",
ui: {
type: "button",
text: "Toggle",
togglable: true,
icon: "cancel",
showText: "always"
}
},
{
name: "split-btn",
ui: {
type: "splitButton",
text: "SplitButton",
showText: "always",
icon: null,
menuButtons: [{text: "Option 1"}, {text: "Option 2"}]
}
}
]
});
</script>
Note that all tools have their showText
option set to overflow
and their icon
set to gear
. If the default state does not cover your scenario requirements, you will need to override those options.