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.

In this article