Add custom tool

[Ganzimaro]

Good time of day. While working with the editor, the task arose of adding an additional button to the editor. I re-read a lot of documentation but could not find a solution to the problem. In general, the essence of the question: how to make the button respond to the selected text, for example, the same "bold"?

[Petar]

Hi Ganzimaro,

Here is a sample StackBlitz demonstrating the desired behaviour - https://stackblitz.com/edit/angular-w6svqx?file=app/app.component.ts

There are two key points here:

1. We have to create a template reference variable for the <kendo-editor> like so:

   <kendo-editor #editor>
   </kendo-editor>

2. Use an existing toolbar tool or a custom one and execute an editor command(using the exec method) on click like this:

   <kendo-toolbar>
       <kendo-toolbar-button text="Bold button" (click)="editor.exec('bold');">
       </kendo-toolbar-button>
   </kendo-toolbar>

A full list of the supported editor commands can be found here - https://www.telerik.com/kendo-angular-ui/components/editor/api/EditorCommand/

More info on how to implement custom editor tools can be found here - https://www.telerik.com/kendo-angular-ui/components/editor/tools/#toc-custom-tools

I hope this helps. Please let me know if further assistance is needed.

Regards,
Petar
Progress Telerik

[Ganzimaro]

Maybe I explained a little wrong. Here I have a <key></key> block, is it possible to include it in the selected text by button, and that edit it?
text: <p>test text 1</p>
result: <p>test <key>text</key> 1</p>

[Ganzimaro]

or if it’s not possible, how in Angular 6+ to get the cursor position when clicking in the kendo editor

[Petar]

Hello Ganzimaro,

Thanks for the provided details. I will try to answer the questions in the order they have been asked:

1. If my understanding is correct, the goal is to insert a custom tag inside the Editor. This however is not supported at the moment and there is no workaround with the current API. It is important to note that when the Editor encounters an unsupported tag(which is set through the [value] input or otherwise), this tag is removed along with all of its contents.
2. Currently the Editor does not provide any way of retrieving the cursor position. However based on this StackOverflow thread I have created a sample StackBlitz app which shows how to get the cursor position - https://stackblitz.com/edit/angular-rfudnb?file=app/app.component.ts.

If having any of these features as built-in is important for you, please consider submitting a feature request on our Feedback Portal:

https://feedback.telerik.com/kendo-angular-ui

We keep a close eye on it as it is one of our main indicators on what is in high demand. When a feature is highly requested, we adjust our priorities and work accordingly so it gets developed faster.

I hope this helps. Please let me know if further assistance is needed.

Regards,
Petar
Progress Telerik