Custom Tool for Rich Text Editor

[Daniel Williams]

Hi,

I am finding it difficult to get a custom tool working with the rich text editor control.  The purpose of the custom tool is to provide a dropdown list of insertable fields into the content of RTE.  For example, one option in the dropdown would be 'First Name', and as a result of selecting this item, the value '#Firstname#' would be inserted into the content.

So far I have managed to get a control on to the toolbar:

But I am yet to get it to do anything useful.  Ideally it would display a list of fields, a bit like the Paragraph tool except, it would display selectable fields rather than paragraph formatting types.

Any help you can provide would be greatly appreciated.

Best regards

Daniel Williams

[Prince Oliver]

Hi Daniel,  

 

Thank you for using Syncfusion products. 

 

We have checked your requirement for custom tool in RTE control with DropDownList. We can render the DropDownList control inside RTE and insert the selected value into editor using  “insertHtml” method. Kindly refer to the following code snippet. 

 

change: (args: any)=>{ 

    proxy.focusIn(); 

    InsertHtml.Insert(document, document.createTextNode(args.value)); 

} 

 

We prepared a sample as per your requirement, please find the sample at the following location: https://stackblitz.com/edit/angular-8i57rh-jqdzpw  

 

Please let us know if you require any further assistance on this.   

 

Regards, 

Prince