toolsArray

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

Example - add built-in and custom buttons to the tools collection

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

Example - add grouped tools collection using multi array

<textarea id="editor"></textarea>
<script>
  $("#editor").kendoEditor({
    tools: [
      [
        "bold",
        "italic",
        "underline",
        "strikethrough"
      ],
      [
        "justifyLeft",
        "justifyCenter",
        "justifyRight",
        "justifyFull"
      ],
      [
        "insertUnorderedList",
        "insertOrderedList",
        "indent",
        "outdent"
      ],
    ]
  });
</script>
In this article
toolsRelated Properties
Not finding the help you need?
Contact Support