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

Tools

configuration

A collection of tools that are used to interact with the Editor. Tools may be switched on by specifying their name. Custom tools and tools that require configuration are defined as objects. The tools property can be a matrix - array of arrays. When defined in this manner, the tools in each internal array are grouped together.

The matrix approach (grouping of tools) works only with tools that are of type button. It does not work for the 'Font and color' tools.

The available editor commands are:

Basic text formatting - bold, italic, underline, strikethrough, subscript, superscript
Font and color - fontName, fontSize, foreColor, backColor
Alignment - justifyLeft, justifyCenter, justifyRight, justifyFull
Spacing - lineHeight
Lists - insertUnorderedList, insertOrderedList, indent, outdent
Links, images and files - createLink, unlink, insertImage, insertFile
Table editing - tableWizard, createTable, addColumnLeft, addColumnRight, addRowAbove, addRowBelow, deleteRow, deleteColumn
Structural markup and styles - formatting, cleanFormatting
Snippets - insertHtml
HTML code view - viewHtml
Print edited page - print
Export to PDF - pdf
Format painter - copyFormat, applyFormat
Formatting marks - formattingMarks

tools

Array

<textarea id="editor"></textarea>
<script>
  $("#editor").kendoEditor({
    tools: [
      {
        name: "bold",
      },
      {
        name: "italic"
      },
      {
        name: "underline"
      },
      {
        name: "custom",
        template: '<button id="custom">Custom</button>'
      }
    ]
  });

  $("#custom").kendoButton({
    click: function() {
      console.log("custom hanler")
    }
  })
</script>

<textarea id="editor"></textarea>
<script>
  $("#editor").kendoEditor({
    tools: [
      [
        "bold",
        "italic",
        "underline",
        "strikethrough"
      ],
      [
        "justifyLeft",
        "justifyCenter",
        "justifyRight",
        "justifyFull"
      ],
      [
        "insertUnorderedList",
        "insertOrderedList",
        "indent",
        "outdent"
      ],
    ]
  });
</script>

<textarea id="editor" rows="10" cols="30">
    Put the cursor after this text and use the "Insert HTML" tool.
</textarea>
<script>
    $(document).ready(function() {
        $("#editor").kendoEditor({
            tools: [
                { name: "insertHtml",
                  items: [
                      { text: "Signature", value: "<p>Regards,<br /> John Doe,<br /><a href='mailto:john.doe@example.com'>john.doe@example.com</a></p>" },
                      { text: "Kendo online demos", value: " <a href='//demos.telerik.com/kendo-ui'>Kendo online demos</a> " }
                  ]
                }
            ]
        });
    });
</script>

tools.columns

Number

Specifies the colors columns for "foreColor" and "backColor" tools when list of colors are defined.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
    tools: [{
        name: "foreColor",
        palette: ["#f0d0c9", "#e2a293", "#d4735e", "#65281a"],
        columns: 2
    }]
});
</script>

tools.exec

Function

The JavaScript function which will be executed when the end-user clicks the tool button.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    {
      name: "custom",
      exec: function(e) {
        var editor = this;
        // ...
      }
    }
  ]
});
</script>

tools.items

Array

For tools that display a list of items (fontName, fontSize, formatting), this option specifies the items in the shown list.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    {
      name: "fontName",
      items: [
        { text: "Arial/Verdana", value: "Arial,Verdana,sans-serif" }
      ]
    }
  ]
});
</script>

tools.name

String

When specifying a tool as an object, a tool name is required. Please note that "undo" and "redo" are reserved tool names.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    { name: "custom" }
  ]
});
</script>

tools.palette

String|Array

Specifies the color palette for "foreColor" and "backColor" tools. If you need to use the color gradient view in the picker instead of the palette, set this value to null.

Default: "websafe"

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
    tools: [{
        name: "foreColor"
    }]
});
</script>

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
    tools: [{
        name: "backColor",
        palette: ["#f0d0c9", "#e2a293", "#d4735e", "#65281a"]
    }]
});
</script>

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
    tools: [{
        name: "backColor",
        palette: null
    }]
});
</script>

tools.template

String|Function

The kendo template that will be used for rendering the given tool.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    {
      name: "custom",
      template: "<button class='k-button'>Save draft</button>"
    }
  ]
});
</script>

The code below shows how to use a function template.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    {
      name: "custom",
      template: function() {
        return "<button class='k-button'>Save draft</button>"
      }
    }
  ]
});
</script>

tools.tooltip

String

The text which will be displayed when the end-user hovers the tool button with the mouse.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    { name: "bold", tooltip: "Bold the selected text" }
  ]
});
</script>

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.

<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.

Related Members