Add Custom Tools to the Editor and Customize Built-in Tools

Environment

Customization

The following article contains examples for different customizations of the KendoReact Editor. It includes creating different custom tools and customizing existing ones.

Insert Span With a ClassName

How to make a tool that will insert a span element with a specific class and content.

Solution

We need to create a tool, that will insert text content and add the built-in style mark to it. The class attribute will be added when the mark object is created.

This is an example showcasing how to achieve this:

Insert Non Editable Node

How to insert non editable predefined node in the Editor?

Solution

This can be achieved by creating a tool that will insert a non editable Node. This Node will function as a single element and will be removed with a single key press.

Apply Custom FontSize

How to make a tool that will apply custom font size to the selected content.

Solution

This can be achieved with a custom DropDownList tool that will apply the custom font-size based on array of font-size values.

Background Color Tool

How to create a tool that sets a background color?

Font Color Tool

How to create a tool that sets a color?

Clear Format Tool

How to create a tool that clears the inline formatting?

Solution

This example show how to add the background color, font color and clear format tools: