New to Kendo UI for jQuery? Download free 30-day trial


The Editor provides a predefined collection of tools that are used to interact with the component.

You can enable any of these tools by using the tools configuration option.

Default Tools

If you do not define a set of specific tools, the Editor creates a set of default tools for text formatting. For a runnable example, refer to the demo on the built-in tools in the Editor.

The following example demonstrates how to implement a set of specific Editor tools.

         tools: [

Custom Tools

Apart from the available built-in tools, you can extend the Editor functionality through custom tools that are defined in the tools array.

The following example demonstrates how to add a custom tool button. To enable styling where toolName is the specified name in the custom tool configuration, the custom buttons get a k-toolName CSS class. The undo and redo tool names are reserved.

For a runnable example, refer to the Custom tools Editor Demo

       tools: [
               name: "toolName",
               tooltip: "Custom editor tool",
               exec: function(e) {
                   var editor = $(this).data("kendoEditor");

                   // execute command

Extending the Editor with a Custom Tool

To extend the Editor with a custom tool:

  1. Create a custom command through the kendo.ui.editor.Command.extend method

        var MyCustomCommand = kendo.ui.editor.Command.extend({
          exec: function (e) {
             // Custom Logic.
  2. Insert the Command in the Editor widget object instance.

        kendo.ui.editor.MyCustomCommand = MyCustomCommand;
  3. Register the tool by using the built-in registerTool() method.

          'MyCustomCommand', new kendo.ui.editor.Tool({
              command: MyCustomCommand, 
                  component: "Button",
                  componentOptions: {
                         themeColor: "success",
                        click: () => $("#editor").getKendoEditor().exec    ("MyCustomCommand", "test")
  4. Initialize the Editor

        tools: [

See Also

In this article