Set Image to Custom Tool in Editor
Environment
Product | Progress® Kendo UI® Editor for jQuery |
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>