React Editor: Behave like normal input field?

[Martin]

Hello,

I have three questions about the Kendo React Editor:

1. Is it possible to move the toolbar to the right side of the editor instead of above it?
2. Is it possible to restrict the editor to being one line only (like a <input type="text"> and not a <textarea>)?
3. Is it possible to prevent the user from using key inputs (like Ctrl+B for bold)?

What I want to do is basically an editor that behaves like a normal input field but where I can have a custom dropdown for adding tags, preferably positioned to the right of the "input field".

What I have is an array of "tags" that I want to be able to add to a text field. The tags should be "stylable" like tags I had in a previous question (https://www.telerik.com/forums/creating-a-custom-editor-node-with-html-inside). Other than that I want the field to behave like a regular text field (i.e. no styling, no keyboard shortcuts etc.) and I figured that the easiest way was to create an editor with the above constraints.

Constraints #2 and #3 are most important, I can live without #1 if it's not possible.

[Martin]

To answer my own question if someone needs it: Yes it is. For reference, I made a StackBlitz: https://stackblitz.com/edit/react-y3dx71-jbttn4?file=app%2Fmain.jsx

For #1:

• In main.jsx line 165, I added a className to the editor.
• In index.html lines 133-137, I added styling for my class.

For #2:

• In main.jsx lines 158-164, I added specific content styling to the editor.
• In main.jsx lines 104-117, I added styling to the elements in the editor iframe.

For #3:

• In main.jsx lines 74-89, I created a custom plugin for preventing specific keys and key combinations.
• In main.jsx lines 126-129, I added the new plugin to the editor plugins.

Even though I am so happy for the help I have gotten previously in this forum, I am really happy that I found this out myself. I hope this can help someone else if they need something similar.

[Stefan]

Hello, Martin,

I`m glad to hear that this is already achieved.

Thank you for sharing the solution with the KendoReact community it is highly appreaciated.

Regards,
Stefan
Progress Telerik