Hello,
I have three questions about the Kendo React Editor:
- Is it possible to move the toolbar to the right side of the editor instead of above it?
- Is it possible to restrict the editor to being one line only (like a <input type="text"> and not a <textarea>)?
- 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.
2 Answers, 1 is accepted
Rank 1
Veteran
Iron
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.
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
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.