Multiple inputs fields within the Rich Text Editor

Hi Syncfusion Team

I have some enquries:

1) Is it possible to have 2 or more inputs within the content area? And the functions of the toolbar also need to be able to share between 2 inputs. You can refer to the image below:

sample.png


2) Are the API for RichTextEditor toolbar and Toolbar same? In the api documents it seems that they both serve same functionalities but their api are different.


Edited: Please refer to this post https://www.syncfusion.com/forums/168531/how-to-separate-toolbar-from-rich-text-editor. I looking for something similar without checkbox to toggle between 2 inputs based on React.


Thanks


3 Replies

GK Gunasekar Kuppusamy Syncfusion Team September 23, 2021 05:45 PM UTC

Hi Amanda, 

Greetings from syncfusion support.

We have further validated your reported query from our end. Currently RichTextEditor doesn't support for multiple input fields inside the editor.

We can only achieve the functionalities using the checkbox button to toggle between the editors. If you are satisfied with this requirement, please let us know, we will modify and share the sample.

Regards,
Gunasekar 



AM Amanda replied to Gunasekar Kuppusamy September 23, 2021 11:43 PM UTC

Hi Gunasekar

Is it possible not to have checkbox button to toggle between the 2 RTE since both sharing same functionalities of the toolbar?

Thanks



GK Gunasekar Kuppusamy Syncfusion Team September 25, 2021 09:40 AM UTC

Hi Amanda,

Good day to you.

We have further validated your reported query from our end and we have prepared a sample based on your requirement.

In the below sample we have done the following this.
  • Initially, two RichTextEditor components were rendered with the toolbars hidden by setting the height to 0px.
  • The toolbar component was rendered commonly, and the RichTextEditor toolbar items were configured into the Toolbar component.
  • We have bound the mouseup event to the document, and when the RichTextEditor is focused, the current RichTextEditor instance is stored using the cursor point position.
  • Based on the toolbar click, we have performed operations by using the ExecuteCommand public method of RichTextEditor.

Please check the solution and let us know if the solution helps from your end.

Regards,
Gunasekar


Loader.
Up arrow icon