1. Home
  2. Forum
  3. Angular - EJ 2
  4. Drop external element into Document editor

Drop external element into Document editor

Hi,

I would like to drop external data (Image and text) into document editor. 

I have list of data which I displayed using treeview.

https://ej2.syncfusion.com/angular/documentation/treeview/data-binding/ 

data object looks like this: [{name: 'admin', id: 123}]


Now I would like to drag treeview element and drop into document editor. I have attached video which can provide you better understnading. 


On drop I would like to get the id of the element and also would like to drop more information of that element into document editor.

Please provide me infromation to achive my requirement. 


Regards,

Parth 


Attachment: drop_in_editor_a565066b.7z

5 Replies
KB Kurthis Banu Abdul Majeeth Syncfusion Team August 5, 2021 07:41 AM UTC

Hi Parthkumar, 

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. 

Regards, 
Kurthis Banu A. 


PK Parthkumar Kakadiya August 5, 2021 11:58 AM UTC

Hi Kurthis,


Your suggestion help me to insert name of the list element. Thanks for that.


Now I would like to insert some more infromation from the list Object element. How could I achieve that.


As I already Explaind list binding with such Object:  [{name: 'admin', email:'[email protected]'  id: 123, image: 'base64string'}]


On drop to document editor, I would Like to drop User email and User Image.

Or 

Just get id of the user from the list element. so that I can filter with id to insert more info from ts file.



KB Kurthis Banu Abdul Majeeth Syncfusion Team August 6, 2021 01:56 PM UTC

Hi Parthkumar, 

We have prepared the sample based on your requirement. 

Sample Link: 

In this sample, we had used list view component for Drag the items and Drop event work as your requirement to insert the “User email and User Image “into the document editor.  

Please let us know this will satisfy your requirement. 

Regards, 
Kurthis Banu A. 


PK Parthkumar Kakadiya August 9, 2021 04:39 PM UTC

Hi Kurthis,

I have found a bug for drop event into editor for firefox.


I would lik you to open the sample link into firefox. 


Sample Link: 

Drop element into the editor and wait for few second. it redirect to the unknown URL.

I have also attached the video to understand clearly. 

Attachment: firefox_drop_problem_bb2867c6.7z

KB Kurthis Banu Abdul Majeeth Syncfusion Team August 10, 2021 05:55 AM UTC

Hi Parthkumar,  

We are cross checked your reported problem in Firefox browser. We are suggested to you use prevent default browser action to resolve your reported issue. We have modified the sample in below link. 

Sample link: 

Regards, 
Kurthis Banu A. 


Loader.
Up arrow icon