How to Make @mention Text Interactive in Angular Rich Text Editor

2 mins read

This knowledge base article explains how to create interactive @mention text in an Angular Rich Text Editor. The solution enables users to click on @mention text to display detailed information about the mentioned entity in a modal dialog. This feature enhances user interaction and provides contextual information seamlessly.

Implementation Steps

1. Rich Text Editor Setup

First, set up the rich text editor in your application. Below is a sample code snippet to initialize the editor:

<div class="control-section">
  <ejs-richtexteditor
    #rte
    id="mention_integration"
    placeholder="Type @ and tag the name"
  >
  </ejs-richtexteditor>
</div>

2. Adding @mention Functionality

Next, integrate the @mention functionality by defining a data source and a display template:

<ejs-mention
  target="#mention_integration_rte-edit-view"
  [dataSource]="mentionData"
  [fields]="{ text: 'Name' }"
  [displayTemplate]="mentionTemplate"
>
  <ng-template #mentionTemplate let-data>
    <span
      class="mention-span"
      title="{{ data.Details }}"
      data-id="{{ data.ID }}"
    >@{{ data.Name }}</span>
  </ng-template>
</ejs-mention>

3. Modal Setup

Create a modal to display the details of the entity when the @mention text is clicked:

<div id="entityModal" class="modal">
  <div class="modal-content">
    <span class="close" (click)="closeModal()">×</span>
    <h3>Details of {{ selectedEntity?.Name }}</h3>
    <p>{{ selectedEntity?.Details }}</p>
    <p>ID: {{ selectedEntity?.ID }}</p>
  </div>
</div>

4. Event Handling

Implement event handling to manage clicks on the @mention text and to open the modal:

ngAfterViewInit(): void {
    const editorContent = this.rte.element.querySelector('.e-content');
    this.contentClickHandler = (event: any) => {
      const target = event.target;
      if (target && target.classList.contains('mention-span')) {
        const id = target.getAttribute('data-id');
        const entity = this.mentionData.find((item) => item.ID === id);
        if (entity) {
          this.openModal(entity);
        }
      }
    };
    editorContent?.addEventListener('click', this.contentClickHandler);
}

ngOnDestroy(): void {
    const editorContent = this.rte.element.querySelector('.e-content');
    editorContent?.removeEventListener('click', this.contentClickHandler);
}

public openModal(entity: any): void {
    this.selectedEntity = entity;
    const modal: any = document.getElementById('entityModal');
    modal.style.display = 'block';
}

public closeModal(): void {
    const modal: any = document.getElementById('entityModal');
    modal.style.display = 'none';
}

Sample

Here is a link to a sample application that demonstrates this implementation: Interactive @mention Example

Did you find this information helpful?

Yes

Comments