How to drag and dropTreeview item text into RichTextEditor for Angular?
You can insert the text into RichTextEditor by dragging and dropping the Angular Treeview item text by using the executeCommand method.
Follow the below mentioned steps:
- Initialize the Treeview component with Drag and Drop feature by setting the allowDraAndDrop property to true.
- Bind the nodeDragStop event to get the drag item text content, which is used to insert the RichTextEditor.
- Now, initialize the RichTextEditor component with the created event.
App.component.html
<div class="control-section"> <ejs-treeview [fields]='field' [allowDragAndDrop]=true (nodeDragStop)='nodeDragStopHandler($event)'></ejs-treeview>
<br /> <br /> <br />
<ejs-richtexteditor #RTE id='defaultRTE' (created)='onCreate()'> <ng-template #valueTemplate> <p>Snack: </p> <p>Drink: </p> <p>Sweet: </p> </ng-template> </ejs-richtexteditor> </div>
|
- Add “e-droppable” to RTE editable input element to allow dropping text in the created event callback.
- On nodeDragStopHandler function, insert the dropped text into RTE by calling the executeCommand public method.
App.component.ts
import { Component, ViewChild } from "@angular/core"; import { detach } from "@syncfusion/ej2-base"; import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorComponent } from "@syncfusion/ej2-angular-richtexteditor";
@Component({ selector: "app-root", templateUrl: "app.component.html", providers: [ToolbarService, LinkService, ImageService, HtmlEditorService] })
export class AppComponent { private editArea: HTMLElement; @ViewChild("RTE", null) public rteObj: RichTextEditorComponent;
//Datasource for Treeview public hierarchicalData: { [key: string]: Object }[] = [ { "id": "01", "text": "Snacks", "expanded": true, "child": [ { "id": "11", "text": "Popcorn" }, { "id": "12", "text": "Chips" } ] }, { "id": "02", "text": "Drinks", "expanded": true, "child": [ { "id": "21", "text": "Pepsi" }, { "id": "22", "text": "Coca cola" } ] }, { "id": "03", "text": "Sweets", "expanded": true, "child": [ { "id": "31", "text": "Candy" }, { "id": "32", "text": "Chocolate" } ] }, ];
//Field config for Treeview public field: Object = { id: "id", text: "text", child: "child", dataSource: this.hierarchicalData };
//RTE created event callback onCreate(): void { //Target element where the text to be dropped this.editArea = this.rteObj.inputElement as HTMLElement;
//Class used to allow drop text from Treeview this.editArea.classList.add("e-droppable"); }
//Treeview nodeDragStop event callback nodeDragStopHandler(e: DragAndDropEventArgs): void {
if (this.rteObj.inputElement.contains(e.target)) { e.cancel = true;
//Create and select range by current mouse pointer position let range: Range = document.caretRangeFromPoint(e.event.clientX, e.event.clientY); this.rteObj.selectRange(range);
//Update the undo/redo data into stack if (this.rteObj.formatter.getUndoRedoStack().length === 0) { this.rteObj.formatter.saveData(); }
//Insert the text value into the RTE by using the executeCommand method this.rteObj.executeCommand("insertHTML", e.draggedNodeData.text);
this.rteObj.formatter.saveData(); this.rteObj.formatter.enableUndo(this.rteObj); } } }
|
Sample: https://stackblitz.com/edit/angular-kncnqt-hc2usq?file=app.component.ts
Conclusion
I hope you enjoyed learning about how to drag and dropTreeview item text into RichTextEditor for Angular.
You can refer to our Angular Treeview feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Treeview 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 check out 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, Direct-Trac, or feedback portal. We are always happy to assist you!
