tools Array

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

Open In Dojo
<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

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

Grouping of tools works as expected only for tools of type "button".

In this article