Add Icons or Images to Custom Editor Tools

Environment

Product

Progress® Kendo UI® Editor for jQuery

Description

How can I add an SVG or FontAwesome icon to a custom Editor tool?

Solution

When you create a custom tool, it depends on the further CSS stylization whether to render an image or an icon in its appearance.

To add an SVG icon:

1. Target the default icon using the k-icon class and the title ofthe custom tool. For example, $('.k-editor [title="My tool"] k-icon') .
2. Use the kendo.ui.iconmethod and set the needed icon.

The following example demonstrates how to decorate your own custom tool with a SVG icon.

EditPreviewOpen In Dojo

    <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px"></textarea>

    <script>
      $("#editor").kendoEditor({
        tools: [ "bold", "italic", "underline",
                {
                  name: "myTool",
                  tooltip: "My tool",
                  exec: function(e) {
                    // My code.
                  }
                },
                {
                  name: "mySecondTool",
                  tooltip: "My second tool",
                  exec: function(e) {
                    // My code.
                  }
                }
               ]
      });


      kendo.ui.icon($('.k-editor [title="My tool"] .k-icon'), { icon: 'camera' });
      kendo.ui.icon($('.k-editor [title="My second tool"] .k-icon'), { icon: 'rss' });
    </script>

To add FontAwesome icon you can also target the default icon element and use CSS content property. The following example demonstrates how to decorate your own custom tool with a FontAwesome icon.

EditPreviewOpen In Dojo

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <div id="example">
      <div class="demo-section wide">
        <textarea id="editor" rows="10" cols="30" style="width:100%; height:790px" aria-label="editor">
        </textarea>

        <script>
          kendo.setDefaults('iconType', 'font');
        </script>

        <style>
          .k-editor [ref-toolbar-tool][title="Custom tool 1"] .k-icon:before {
            font-family: FontAwesome;
            content: "\f09e";
          }

          .k-editor [ref-toolbar-tool][title="Custom tool 2"] .k-icon:before {
            font-family: FontAwesome;
            content: "\f061";
          }
        </style>

        <script>
          $("#editor").kendoEditor({
            tools: [
              {
                name: "custom-tool-1",
                tooltip: "Custom tool 1",
                exec: function (e) {
                  var editor = $("#editor").data("kendoEditor");
                  editor.exec("inserthtml", { value: "<hr />" });
                }
              },
              {
                name: "custom-tool-2",
                tooltip: "Custom tool 2",
                exec: function (e) {
                  var editor = $("#editor").data("kendoEditor");
                  editor.exec("inserthtml", { value: "<hr />" });
                }
              }
            ]
          });
        </script>

      </div>
    </div>