We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Drag and drop text to a rich text editor in Angular

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,

5 Replies

AB Ashokkumar Balasubramanian Syncfusion Team September 16, 2019 06:53 AM

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. 
Could you please check the above sample and get back to us, if you require any further assistance on this? 
Ashokkumar B. 

DJ Darryl Johnson September 17, 2019 06:44 PM

Thanks for the help!

PM Pandiyaraj Muniyandi Syncfusion Team September 18, 2019 12:33 AM

Hi Darry, 
Most welcome!   
Pandiyaraj M  

KB Kurthis Banu Abdul Majeeth Syncfusion Team August 20, 2021 01:08 AM


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: 

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. 

Kurthis Banu A. 

Live Chat Icon For mobile
Up arrow icon