How to drag and drop the ListView item to the Angular Rich Text Editor as text content
You can insert the ListView item as text content to the Rich Text Editor by drag and drop using the ‘executeCommand’ method.
Follow the below mentioned steps to achieve this functionality:.
- Initialize the ListView and RichTextEditor component.
<div class="control-section"> <ejs-listview id='listview' [dataSource]='data'></ejs-listview>
<br /> <br /> <br />
<ejs-richtexteditor #RTE id='defaultRTE' (created)='onCreate()'> </ejs-richtexteditor> </div>
|
- Define data source by configuring draggable as true in htmlAttributes to enable dragging the items in ListView.
public data: { [key: string]: Object }[] = [ { "text": "Hennessey Venom", "id": "list-01", "htmlAttributes": { draggable: true } }, { "text": "Bugatti Chiron", "id": "list-02", "htmlAttributes": { draggable: true } }, { "text": "Bugatti Veyron Super Sport", "id": "list-03", "htmlAttributes": { draggable: true } } ];
|
- Bind the drop event to edit element of the Rich Text Editor, which is used to get and insert the dropped text into the editor.
this.editArea = document.querySelector("#defaultRTE .e-content") as HTMLElement;
// Drop handler this.editArea.addEventListener("drop", this.dropHandler.bind(this));
|
- Bind dragStart event to ListView element to get dragged item’s text content.
this.listviewEle = document.getElementById('listview') as HTMLElement;
// DragStart event binding this.listviewEle.addEventListener("dragstart", function (e) { e.dataTransfer.setData("Text", (e.target as HTMLElement).innerText); });
|
- Now, include following code to dropHandler function to insert the text into the Rich Text Editor.
dropHandler(e: any): void { //Prevent browser default dragop and drop action e.preventDefault();
// Do drop action if the target is inside RTE edit area if (this.rteObj.inputElement.contains(e.target)) { let range: Range;
if (this.rteObj.contentModule.getDocument().caretRangeFromPoint) { range = this.rteObj.contentModule.getDocument().caretRangeFromPoint(e.clientX, e.clientY); } else if (e.rangeParent) { range = this.rteObj.contentModule.getDocument().createRange(); range.setStart(e.rangeParent, e.rangeOffset); }
this.rteObj.selectRange(range);
if (this.rteObj.formatter.getUndoRedoStack().length === 0) { this.rteObj.formatter.saveData(); }
var text = e.dataTransfer.getData('Text').replace(/\n/g, '').replace(/\r/g, '').replace(/\r\n/g, '');
this.rteObj.executeCommand("insertHTML", text); this.rteObj.formatter.saveData(); this.rteObj.formatter.enableUndo(this.rteObj); } }
|
Refer to the followingbelow sample for more details.
Sample: https://stackblitz.com/edit/angular-kncnqt-ucevst?file=app.component.ts
