Edit this page

Set Image to Custom Tool in Editor

Environment

Product Progress Kendo UI Editor
Operating System All
Browser All
Preferred Language JavaScript

Description

How can I set an image to the custom tool that I added to the Editor?

Solution

When you add a custom tool to the Editor and set its name option, a class that is based on the specified name is automatically added to the corresponding HTML element of the custom tool. For example, if you set the tool name to customButton, the k-i-custom-button class is added to the span element of the tool. You can use this class as a selector in a CSS rule, which can set a background-image to the custom tool.

    <textarea id="editor"></textarea>
    <script>
        $("#editor").kendoEditor({
          tools: [
            {
              name: "customButton",
              exec: function(e) {
                // handle the event...
              }
            }
          ]
        });
    </script>
    <style>  
        .k-i-custom-button {
            background-image: url("https://www.w3schools.com/images/compatible_chrome.gif");
            background-repeat: no-repeat;
        }
    </style>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy