Customizing native editor

[RIS Team]

I have several questions here:

1. How can I implement my own tools (Vue component)?
2. How to implement an emoji picker (Vue component)?
3. How to implement mentions (@name) with a Vue component?

I can't find anything about it in the docs.

[Filip]

Hi, Sven,

Regarding your questions:

1. For more information on using custom tools I can recommend reviewing the following article:

https://www.telerik.com/kendo-vue-ui/components/editor/tools/#toc-customizing-built-in-tools

2. An emoji picker can be implemented using a custom tool, I have created this example to showcase a possible approach here:

https://stackblitz.com/edit/btuj3m-aqqfod?file=src%2Fmain.vue

3. The mentions functionality can be implemented using ProseMirror's mentions plugin, here is an example that showcases this approach:

https://stackblitz.com/edit/r4dfkd-o4bynx?file=src%2Fmain.vue

I hope this helps but please let me know in case further assistance is required.

Regards,
Filip
Progress Telerik

[RIS Team]

Thank your for the reply but the answers don't get me much further:

How can the emoji be inserted at the cursor position? -> Solved
https://stackblitz.com/edit/btuj3m-aqqfod?file=src%2Fmain.vue

The solution with the ProseMirror plugin is really bad. I hope Telerik will find another way.

1 + 2 (This is the most important point)  -> Solved
How can we use our own tools together with the existing ones?
The demo only replaces the complete toolbar without displaying the standard tools. That's not the solution.

 

[Filip]

Hi, Sven,

I am sorry to hear that you are encountering issues with the ProseMirror plugin approach. Regarding your questions:

1)  Inserting the emoji at the cursor position can be achieved by setting a `ref` to the Editor component and creating a transaction from the current state and inserting a node that will contain the emoji. 

2) The rest of the tools can be used together with the plugin by passing them to the tools array. I have created an example that showcases both approaches here:

https://stackblitz.com/edit/btuj3m-i1e1k1?file=src%2Fmain.vue

Please review the approach above and let me know in case you are encountering any issues with a specific tool or with the emoji insertion and I will do my best to resolve them and provide an updated example that will better cover your needs.

Regards,
Filip

[RIS Team]

Thank you very much for your help.
All my questions have been answered.