Is there any functionality to drag & drop "chips" in a text area

[Drio]

I'm looking for something like this, but for Angular

https://www.syncfusion.com/kb/10292/how-to-add-drag-and-drop-text-option-in-document-editor-for-asp-net-mvc

I want to enable a TextEditor, with the option to accept drag & drop variables in the text. This will be to create a layout, I want to see the variables like a chips (angular control) inside the text

Something like the attached image

Thank you

Attachment: Screen_Shot_20190910_at_9.31.18_PM.png_1ef4377a.zip

[Narayanasamy Panneer Selvam]

Hi Drio, 

 

Greetings from Syncfusion support. 

 

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 text / Element which can drop into textarea of RTE as chips. Also, We have bound drop event to the editor.  

 

Demo sample: https://stackblitz.com/edit/angular-kncnqt-zybkrk?file=app.component.ts 

 

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

  

Regards,  

Narayanasamy P.  

[Drio]

Thank you Narayanasamy,

But I can't drag any Item from Car list ...

[Narayanasamy Panneer Selvam]

Hi Drio,  

 

Thanks for your update. 

 

In the previously shared sample, the dragable support for the listview item is not enabled. So, it works after you have selected the required text and then drag and drop it. 

  

Now in the modified sample, we have enabled the draggable support for listview item by passing draggable: true in htmlAttibutes through dataSource. Now It works as expected. Please find the code changes in below,  

  

Code example: 

public data: Object[] = [ 

    { 

      "text": "Hennessey Venom", 

      "id": "list-01", 

      "htmlAttributes": { draggable: true } 

    } 

] 

 

 

For your convenience we have prepared a sample based on above code snippet, 

 

Demo sample https://stackblitz.com/edit/angular-kncnqt-zd3pn4?file=app.component.html 

  

Please let us know if we have misunderstood anything as incorrect. 

 

Regards,  

Narayanasamy P.  

[Drio]

Great!!

That's what I'm looking for ...

Thank you so much!

[Narayanasamy Panneer Selvam]

Hi Drio,


You are welcome.


We are glad to hear that the reported issue has resolved at your end.  😊

Regards,
Narayanasamy P. 

[veymar montano colque]

Hi sync-fusion, I wonder if there is the same functionality in blazor?

[Revanth Krishnan]

Hi Veymar, 

 

We are currently validating your query with high priority, we will update you with further details within two business days on or before 17^th February. 

 

We appreciate your patience until then. 

 

Regards, 

Revanth 

[Revanth Krishnan]

Hi Veymar, 

 

 

We are currently facing an issue in the ListView Blazor component when setting the draggable for the list items. So we have considered the “ListView HtmlAttributes property in DataModel is not working” as a bug from our side. We will include this fix in the patch release which is expected to be rolled out by the mid of April 2021. 

 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: 

https://www.syncfusion.com/feedback/22583 

 

Regards, 

Revanth 

[Ranul Pallemulle]

Hi,

What would be the recommended approach for attaching event handlers to chips in the rich text editor (for example, to remove the chip using a close button within the chip)? And is there a possibility to use ejs-chiplist with the rich text editor? Our limitation at the moment is that we have to use rteObj.executeCommand('insertHTML', ...) to add the chip as an HTML string, which means that we have to write logic elsewhere to make it interactive. Maybe if there is a way to extend executeCommand with custom commands (like 'insertChip') it would be easier to do this?

Thanks,

Ranul

[Indrajith Srinivasan]

Hi Ranul, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. You can’t embed components inside the RichTextEditor, instead you can use the public methods to achieve your requirement of “chip with a close button”. Using the public method insertHTML you can achieve the requirement, since it is an application-level requirement which can’t be considered with new public methods. We have also prepared a sample, that tries to meet your requirements. 

 

Code:  

 

 

dropHandler() { 

     var value = '<span id=' +"'" + this.uuidValue +"'" + ' class="e-chip-list" style="display:inline" contenteditable="false"> <span class="e-chip"> <span class="e-chip-text"> ' + text + '</span><span class="e-chip-delete e-dlt-btn"></span></span> </span>'; 

 

      this.rteObj.executeCommand('insertHTML', value); 

      var deleteBtn = e.target.querySelector('#' + this.uuidValue + ' ' + '.e-chip-delete'); 

     if (deleteBtn) { 

        deleteBtn.addEventListener('click', this.remove.bind(this, deleteBtn)); 

      } 

} 

 

remove(deleteBtn) { 

    deleteBtn.closest('.e-chip-list').remove(); 

  } 

 

 

In the below shared sample the following are configured, 

• Close icon for the chips.
• Click action binding, for the elements and removing it when clicked.

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

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith