This is a migrated thread and some comments may be shown as answers.
React Editor: Behave like normal input field?
2 Answers 8 Views
This is a migrated thread and some comments may be shown as answers.
Martin
Top achievements
Rank 1
Iron
Martin asked on 19 Apr 2021, 04:05 PM

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.

2 Answers, 1 is accepted

Sort by
0
Martin
Top achievements
Rank 1
Iron
answered on 20 Apr 2021, 05:32 PM

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.

0
Accepted
Stefan
Telerik team
answered on 21 Apr 2021, 05:03 AM

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/.

Asked by
Martin
Top achievements
Rank 1
Iron
Answers by
Martin
Top achievements
Rank 1
Iron
Stefan
Telerik team
Share this question
or