tools.items Array

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

Example - specify custom font families

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

tools.items.text String

The string that the popup item will show.

Example

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

tools.items.value String

The value that will be applied by the tool when this item is selected.

Example

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    {
      name: "fontSize",
      items: [
        { text: "12px", value: "12px" },
        { text: "24px", value: "24px" }
      ]
    }
  ]
});
</script>

tools.items.context String

Only applicable for the formatting tool. Specifies the context in which the option will be available.

Example

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    {
      name: "formatting",
      items: [
        { text: "Title", value: "h1" },

        // will be shown only when selection is in H1
        { text: "Note", value: "span.note", context: "h1" }
      ]
    }
  ]
});
</script>