Drag and drop text to a rich text editor in Angular

[Darryl Johnson]

Hi Team,

I am looking for a solution for drag and drop text from a listbox to a rich text editor in Angular [ejs-richtexteditor] similar to the solution listed in the below link -https://www.syncfusion.com/kb/10292/how-to-add-drag-and-drop-text-option-in-document-editor-for-asp-net-mvc.

Thanks and Regards,

Darryl

[Ashokkumar Balasubramanian]

Hi Darry Johnson, 

 

Good day to you. 

 

We have validated your requirement and have prepared sample as you have expected. In this sample, we have provided drag and drop support for selected item which can drop into TextArea of RTE as text.  Also, we have bound drop event to the editor. 

 

We have enabled the draggable support for List Box item by passing draggable: true in htmlAttibutes through dataSource. 

 

Sample: https://stackblitz.com/edit/angular-kncnqt-ggtsvu?file=app.component.ts 

 

Could you please check the above sample and get back to us, if you require any further assistance on this? 

 

Regards, 

Ashokkumar B. 

[Darryl Johnson]

Thanks for the help!

[Pandiyaraj Muniyandi]

Hi Darry, 

 

Most welcome!   

  

Regards,   

Pandiyaraj M  

[BADIS Mariem]

hello,

@

Could you please check this.

drag and drop in document editor

https://www.syncfusion.com/forums/168210/how-can-i-drag-and-drop-an-element-from-a-list-inside-document-editor

[Kurthis Banu Abdul Majeeth]

Hi BADIS, 

We have prepared the sample based on your requirement. For your reference, we have attached angular stack-blitz sample in the below link. 

Sample link: 

https://stackblitz.com/edit/angular-qzxxzn-vy1bzb?file=app.component.ts 

 

In this sample, we had used list view component for Drag the items and used drop event for insert the dragged text into the documenteditor. Please find the code change in line number 31 in app.component.ts file. 

 

Regards, 

Kurthis Banu A.