How to drag and drop the ListBox item to the Rich Text Editor for Angular

1 min read

This article explains how to drag and drop the ListBox item to the RichTextEditor. You can insert the ListBox item as text content into the RichTextEditor by dragging and dropping it using the ‘executeCommand’ method.

Follow the below-mentioned steps to achieve this functionality:

1. Initialize the ListBox and RichTextEditor components.

<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>

2. Define the data source by configuring draggable as true in htmlAttributes to enable dragging the items in the 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 }

  }

];

3. Bind the drop event to the Rich Text Editor’s edit element, which is used to retrieve and insert dropped text into the RTE.

this.editArea = document.querySelector("#defaultRTE .e-content") as HTMLElement;
 
// Drop handler
this.editArea.addEventListener("drop", this.dropHandler.bind(this))

3. Bind the dragStart event to the ListBox element to get the dragged item's 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);

});

4. Include the following code to the 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 working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to drag and drop the ListBox item to the Rich Text Editor.

You can refer to our Angular feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our Angular RichTextEditor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to drag and drop the ListBox item to the Rich Text Editor for Angular

Conclusion

Access denied