1. Home
  2. Forum
  3. Angular - EJ 2
  4. Separate toolbar from richtext editor component.

Separate toolbar from richtext editor component.

Hi team, 
I want change position of editor toolbar. It should be separated from original component and should able place anywhere(Like outside from iframe). I also want to use more than one editor in single page. For both editor should have common toolbar. Thanks in advance.  

5 Replies 1 reply marked as answer
IS Indrajith Srinivasan Syncfusion Team September 1, 2020 12:39 PM UTC

Hi Mauli, 
 
Greetings from Syncfusion support, 
 
We have validated your reported query. Yes, you can create the toolbar items anywhere in the page by hiding the default toolbar rendered and use the executeCommand to perform the actions in Rich Text Editor. We have configured the following in the sample. 
 
  • Two Rich Text Editor with a common toolbar for performing actions.
  • A check box to choose which editor the toolbar options are to be affected. (If enabled, first editor has the instance and the selected toolbar properties will be applied. if disabled, second editor has the instance)
  • Configured some of the Rich Text Editor tools. Can refer the below documentation for the list of executeCommands.
 
 
 
Can you please check the above sample and let us know if it meets your requirements? 
 
Regards, 
Indrajith 


Marked as answer
MA Mauli September 1, 2020 09:05 PM UTC

Hi Indrajith,
Thank you for your responses. Solution provided by you is working perfect for me. Just what I want more, If tool is active it should highlighted.
Like in above image, Bold is active or currently cursor is on bold text.   

IS Indrajith Srinivasan Syncfusion Team September 2, 2020 12:29 PM UTC

Hi Mauli, 
 
Good day to you, 
 
We have validated your reported query. Yes, you can achieve your desired behavior using the CSS based on the current icon clicked. We have also modified the already shared sample.  
 
 
Regards, 
Indrajith 


MA Mauli September 16, 2020 06:58 AM UTC

Sorry but it's not working as per expectation. Here cursor is on first word. word is not bold. Still in toolbar it showing bold highlighted. 

IS Indrajith Srinivasan Syncfusion Team September 17, 2020 03:34 PM UTC

Hi Mauli,

We have validated your reported query. Since the toolbar is a customized toolbar, maintaining the toolbar status based on the cursor position increases the application level codes. We have binded mouseup event and highlighted the toolbar based on the toolbarstatus from Rich Text Editor. We have also prepared a sample that tries to meet your requirements.

Sample: https://stackblitz.com/edit/angular-nvf4zk-aqhnuv?file=app.component.ts  
 
Can you please check the above sample and let us know if it meets your requirements? 
 
Regards, 
Indrajith

Loader.
Up arrow icon