Add Icons or Images to Custom Editor Tools
Environment
| Product | Progress® Kendo UI® Editor for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I add an item or an image 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 such visual elements, use the automatically generated class name taken from the tool and follow the k-i-[ToolName] pattern.
The following example demonstrates how to decorate your own custom tool with a background image or a FontAwesome icon.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<style>
/* Using plain image for the background. */
.k-editor .k-i-my-tool
{
background: 50% 50% no-repeat url(https://demos.telerik.com/kendo-ui/content/web/16x16/Chart.png);
}
/* Using a FontAwesome icon for the background. */
.k-editor .k-i-my-second-tool:before
{
font-family: FontAwesome;
content: "\f09e";
font-size:16px;
}
</style>
<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.
}
}
]
});
</script>