How to drag and drop the ListBox item to the Rich Text Editor for Angular
You can insert the ListBox item as text content into Rich Text Editor by drag and drop using the ‘executeCommand’ method.
Follow the below mentioned steps to achieve this functionality:.
- Initialize the ListBox and RichTextEditor component.
<div class="control-section"> <ejs-listbox id="listbox" [dataSource]='data'> </ejs-listbox>
<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 ListBox.
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 the Rich Text Editor’s edit element, which is used to get and insert dropped text into RTE.
this.editArea = document.querySelector("#defaultRTE .e-content") as HTMLElement;
// Drop handler this.editArea.addEventListener("drop", this.dropHandler.bind(this));
|
- Bind the dragStart event to LissitBox element to get dragged item text content.
this.listboxEle = document.getElementById('listbox') as HTMLElement;
// DragStart event binding this.listboxEle.addEventListener("dragstart", function (e) { e.dataTransfer.setData("Text", e.target.innerText); });
|
- Include the 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(); }
let text: string = 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-neetwn?file=package.json
