Mentions in React Rich Text Editor Component

5 Nov 202524 minutes to read

The Mention feature, integrated with the Syncfusion React Rich Text Editor via the Mention component , enables users to tag or mention users or objects from a suggestion list. This functionality streamlines tagging by eliminating manual entry of names or identifiers, enhancing efficiency and accuracy.

Setup and configuration

Use the target property of the Mention component to specify the ID of the content editable div element within the Rich Text Editor. When setting the target, make sure to append the suffix _rte-edit-view to the ID. This allows you to enable the Mention functionality within the Rich Text Editor, so that users can mention or tag other users or objects from the suggested list while editing the text.

Using mentions

When users type the @ symbol followed by a character the Rich Text Editor, a suggestion list appears, Users can then select an item from the list by:

Clicking on it
Typing the name of the item they want to tag

Customizing suggestion list

Minimum input length for Mention suggestions

You can control when the suggestion list appears by setting the minLength property in the Mention component. This property defines the minimum number of characters a user must type after the mention character (@) to trigger the search action. This is especially useful when working with large datasets, as it helps reduce unnecessary queries and improves performance.

By default, minLength is set to 0, which means the suggestion list appears immediately after the mention character is entered. However, you can increase this value to delay the search until the user has typed a specific number of characters.

In the following example, the minLength is set to 3, so the suggestion list will only appear once the user types three or more characters after the @ symbol.

[Class-component]

app.jsx
app.tsx
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

class App extends React.Component {
    data = [
        { Name: 'Selma Rose', EmailId: '[email protected]' },
        { Name: 'Maria', EmailId: '[email protected]' },
        { Name: 'Russo Kay', EmailId: '[email protected]' },
        { Name: 'Robert', EmailId: '[email protected]' },
        { Name: 'Camden Kate', EmailId: '[email protected]' },
    ];
    fieldsData = { text: 'Name' };
  
    rteValue = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
    
    render() {
        return (<div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
            <RichTextEditorComponent id="mention_integration" value={this.rteValue} placeholder="Type @ and tag the name">
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
          </div>
        </div>

        <MentionComponent id="mentionEditor" minLength={3} target="#mention_integration_rte-edit-view" dataSource={this.data} fields={this.fieldsData}></MentionComponent>
      </div>);
    }
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public mentionObj : MentionComponent;
  private data: { [key: string]: Object }[] = [
      { Name: 'Selma Rose', EmailId: '[email protected]' },
      { Name: 'Maria', EmailId: '[email protected]' },
      { Name: 'Russo Kay', EmailId: '[email protected]' },
      { Name: 'Robert', EmailId: '[email protected]' },
      { Name: 'Camden Kate', EmailId: '[email protected]' },
  ];
  private  fieldsData: { [key: string]: string }={ text: 'Name' };

  private rteValue:string = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
    
  render() {
    return (
      <div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
            <RichTextEditorComponent id="mention_integration" value={this.rteValue} placeholder="Type @ and tag the name"  >
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
            </RichTextEditorComponent>
          </div>
        </div>

        <MentionComponent ref={(scope) => { this.mentionObj = scope; }} id="mentionEditor" target="#mention_integration_rte-edit-view" dataSource={this.data} fields={this.fieldsData} minLength={3}></MentionComponent>
      </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function App() {
    let rteValue = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
   
    let data = [
        { Name: 'Selma Rose', EmailId: '[email protected]' },
        { Name: 'Maria', EmailId: '[email protected]' },
        { Name: 'Russo Kay', EmailId: '[email protected]' },
        { Name: 'Robert', EmailId: '[email protected]' },
        { Name: 'Camden Kate', EmailId: '[email protected]' },
    ];
    let fieldsData = { text: 'Name' };
    return (<div className='control-pane'>
        <div className='control-section' id="rte">
        <div className='rte-control-section'>
            <RichTextEditorComponent id="mention_integration" value={rteValue} placeholder="Type @ and tag the name">
            <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
        </div>
        </div>
        <MentionComponent id="mentionEditor" minLength={3} target="#mention_integration_rte-edit-view" dataSource={data} fields={fieldsData}></MentionComponent>
    </div>);
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function App() {
    let rteValue:string = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
 
    let data: { [key: string]: Object }[] = [
        { Name: 'Selma Rose', EmailId: '[email protected]' },
        { Name: 'Maria', EmailId: '[email protected]' },
        { Name: 'Russo Kay', EmailId: '[email protected]' },
        { Name: 'Robert', EmailId: '[email protected]' },
        { Name: 'Camden Kate', EmailId: '[email protected]' },
    ];
    let  fieldsData: { [key: string]: string }={ text: 'Name' };

    return (
    <div className='control-pane'>
        <div className='control-section' id="rte">
        <div className='rte-control-section'>
            <RichTextEditorComponent id="mention_integration" value={rteValue} placeholder="Type @ and tag the name">
            <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
        </div>
        </div>
        <MentionComponent id="mentionEditor" minLength={3} target="#mention_integration_rte-edit-view" dataSource={data} fields={fieldsData}></MentionComponent>
    </div>
    );
}

export default App;

Customizing suggestion list count

You can control the number of items displayed in the Mention suggestion list using the suggestionCount property. This is particularly useful when working with large datasets, allowing you to limit the number of suggestions shown to the user.

By default, the suggestion list displays 25 items. You can customize this value to show fewer or more items based on your application’s needs.

In the example below, the suggestionCount is set to 5, so only 5 items will be displayed in the suggestion list when the user types the mention character (@).

[Class-component]

app.jsx
app.tsx
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

class App extends React.Component {
    data = [
      { Name: 'Selma Rose', EmailId: '[email protected]' },
      { Name: 'Maria', EmailId: '[email protected]' },
      { Name: 'Russo Kay', EmailId: '[email protected]' },
      { Name: 'Robert', EmailId: '[email protected]' },
      { Name: 'Camden Kate', EmailId: '[email protected]' },
      { Name: 'Sophia', EmailId: '[email protected]' },
      { Name: 'Margaret', EmailId: '[email protected]' },
      { Name: 'Ursula Ann', EmailId: '[email protected]' },
      { Name: 'Laura Grace', EmailId: '[email protected]' },
      { Name: 'Albert', EmailId: '[email protected]' },
      { Name: 'William', EmailId: '[email protected]' },
    ];
    fieldsData = { text: 'Name' };
  
    rteValue = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
    
    render() {
        return (<div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
            <RichTextEditorComponent id="mention_integration" value={this.rteValue} placeholder="Type @ and tag the name">
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
          </div>
        </div>

        <MentionComponent id="mentionEditor" suggestionCount={5} target="#mention_integration_rte-edit-view" dataSource={this.data} fields={this.fieldsData}></MentionComponent>
      </div>);
    }
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public mentionObj : MentionComponent;
  private data: { [key: string]: Object }[] = [
      { Name: 'Selma Rose', EmailId: '[email protected]' },
      { Name: 'Maria', EmailId: '[email protected]' },
      { Name: 'Russo Kay', EmailId: '[email protected]' },
      { Name: 'Robert', EmailId: '[email protected]' },
      { Name: 'Camden Kate', EmailId: '[email protected]' },
      { Name: 'Sophia', EmailId: '[email protected]' },
      { Name: 'Margaret', EmailId: '[email protected]' },
      { Name: 'Ursula Ann', EmailId: '[email protected]' },
      { Name: 'Laura Grace', EmailId: '[email protected]' },
      { Name: 'Albert', EmailId: '[email protected]' },
      { Name: 'William', EmailId: '[email protected]' },
  ];
  private  fieldsData: { [key: string]: string }={ text: 'Name' };

  private rteValue:string = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
    
  render() {
    return (
      <div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
            <RichTextEditorComponent id="mention_integration" value={this.rteValue} placeholder="Type @ and tag the name"  >
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
            </RichTextEditorComponent>
          </div>
        </div>

        <MentionComponent ref={(scope) => { this.mentionObj = scope; }} id="mentionEditor" target="#mention_integration_rte-edit-view" dataSource={this.data} fields={this.fieldsData} suggestionCount={5}></MentionComponent>
      </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function App() {
    let rteValue = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
   
    let data = [
        { Name: 'Selma Rose', EmailId: '[email protected]' },
        { Name: 'Maria', EmailId: '[email protected]' },
        { Name: 'Russo Kay', EmailId: '[email protected]' },
        { Name: 'Robert', EmailId: '[email protected]' },
        { Name: 'Camden Kate', EmailId: '[email protected]' },
        { Name: 'Sophia', EmailId: '[email protected]' },
        { Name: 'Margaret', EmailId: '[email protected]' },
        { Name: 'Ursula Ann', EmailId: '[email protected]' },
        { Name: 'Laura Grace', EmailId: '[email protected]' },
        { Name: 'Albert', EmailId: '[email protected]' },
        { Name: 'William', EmailId: '[email protected]' },
    ];
    let fieldsData = { text: 'Name' };
    return (<div className='control-pane'>
        <div className='control-section' id="rte">
        <div className='rte-control-section'>
            <RichTextEditorComponent id="mention_integration" value={rteValue} placeholder="Type @ and tag the name">
            <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
        </div>
        </div>
        <MentionComponent id="mentionEditor" suggestionCount={5} target="#mention_integration_rte-edit-view" dataSource={data} fields={fieldsData}></MentionComponent>
    </div>);
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function App() {
    let rteValue:string = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
 
    let data: { [key: string]: Object }[] = [
      { Name: 'Selma Rose', EmailId: '[email protected]' },
      { Name: 'Maria', EmailId: '[email protected]' },
      { Name: 'Russo Kay', EmailId: '[email protected]' },
      { Name: 'Robert', EmailId: '[email protected]' },
      { Name: 'Camden Kate', EmailId: '[email protected]' },
      { Name: 'Sophia', EmailId: '[email protected]' },
      { Name: 'Margaret', EmailId: '[email protected]' },
      { Name: 'Ursula Ann', EmailId: '[email protected]' },
      { Name: 'Laura Grace', EmailId: '[email protected]' },
      { Name: 'Albert', EmailId: '[email protected]' },
      { Name: 'William', EmailId: '[email protected]' },
    ];
    let  fieldsData: { [key: string]: string }={ text: 'Name' };

    return (
    <div className='control-pane'>
        <div className='control-section' id="rte">
        <div className='rte-control-section'>
            <RichTextEditorComponent id="mention_integration" value={rteValue} placeholder="Type @ and tag the name">
            <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
        </div>
        </div>
        <MentionComponent id="mentionEditor" suggestionCount={5} target="#mention_integration_rte-edit-view" dataSource={data} fields={fieldsData}></MentionComponent>
    </div>
    );
}

export default App;

Customizing suggestion list using templates

Item template

You can customize how each item appears in the suggestion list using the itemTemplate property. This allows you to display additional details such as email, role, or profile image alongside the mention name.

Display template

Use the displayTemplate property to define how the selected mention appears in the editor content.

For example, by default, the mention chip renders as:

<span contenteditable="false" class="e-mention-chip">@Selma Rose</span>

Using the displayTemplate property, you can customize it to render as a clickable link:

<a href="mailto:[email protected]" title="[email protected]">@Selma Rose</a>

This allows you to create more interactive and informative mentions within the editor.

In the following sample, we configured the following properties:

itemTemplate - Used to display the customized appearance in suggestion list.
displayTemplate - Used to customize how the selected value appears in the editor content.
allowSpaces - Allow to continue search action if user enter space after mention character while searching.
suggestionCount - The maximum number of items that will be displayed in the suggestion list.

[Class-component]

app.jsx
app.tsx
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

class App extends React.Component {
    data = [
        { Name: "Selma Rose", Status: "active", EmployeeImage: "2.png", EmailId: "[email protected]" },
        { Name: "Maria", Status: "active", EmployeeImage: "1.png", EmailId: "[email protected]" },
        { Name: "Russo Kay", Status: "busy", EmployeeImage: "8.png", EmailId: "[email protected]" },
        { Name: "Camden Kate", Status: "active", EmployeeImage: "9.png", EmailId: "[email protected]" },
        { Name: "Robert", Status: "busy", EmployeeImage: "dp.png", EmailId: "[email protected]" },
        { Name: "Garth", Status: "active", EmployeeImage: "7.png", EmailId: "[email protected]" },
        { Name: "Andrew James", Status: "away", EmployeeImage: "pic04.png", EmailId: "[email protected]" },
        { Name: "Olivia", Status: "busy", EmployeeImage: "5.png", EmailId: "[email protected]" },
        { Name: "Sophia", Status: "away", EmployeeImage: "6.png", EmailId: "[email protected]" },
        { Name: "Margaret", Status: "active", EmployeeImage: "3.png", EmailId: "[email protected]" },
        { Name: "Ursula Ann", Status: "active", EmployeeImage: "dp.png", EmailId: "[email protected]" },
        { Name: "Laura Grace", Status: "away", EmployeeImage: "4.png", EmailId: "[email protected]" },
        { Name: "Albert", Status: "active", EmployeeImage: "pic03.png", EmailId: "[email protected]" },
        { Name: "William", Status: "away", EmployeeImage: "8.png", EmailId: "[email protected]" }
    ];
    fieldsData = { text: 'Name' };
    itemTemplate(data) {
        return (<table>
        <tr>
          <td>
            <div id="mention-TemplateList">
              <img className="mentionEmpImage" src={"src/rich-text-editor/images/" + data.EmployeeImage}/>
              <span className={"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom" + data.Status}></span>
            </div>
            </td>
            <td className="mentionNameList">
              <span className="person">{data.Name}</span>
              <span className="email">{data.EmailId}</span>
            </td>
          </tr>
        </table>);
    }
    displayTemplate(data) {
        return (<React.Fragment>
         <a href={`mailto:${data.EmailId}`} title={data.EmailId}>@{data.Name}</a>
      </React.Fragment>);
    }
    actionBegineHandler(args) {
        if (args.requestType === 'EnterAction') {
            args.cancel = true;
        }
    }
    rteValue = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
    
    render() {
        return (<div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
            <RichTextEditorComponent id="mention_integration" value={this.rteValue} placeholder="Type @ and tag the name" actionBegin={this.actionBegineHandler.bind(this)}>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
          </div>
        </div>

        <MentionComponent id="mentionEditor" target="#mention_integration_rte-edit-view" suggestionCount={8} showMentionChar={false} allowSpaces={true} dataSource={this.data} fields={this.fieldsData} popupWidth="250px" popupHeight="200px" itemTemplate={this.itemTemplate} displayTemplate={this.displayTemplate}></MentionComponent>
      </div>);
    }
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public mentionObj : MentionComponent;
  private data: { [key: string]: Object }[] = [
    { Name: "Selma Rose", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/2.png", EmailId: "[email protected]" },
    { Name: "Maria", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/1.png", EmailId: "[email protected]" },
    { Name: "Russo Kay", Status: "busy", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/8.png", EmailId: "[email protected]" },
    { Name: "Camden Kate", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/9.png", EmailId: "[email protected]" },
    { Name: "Robert", Status: "busy", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/dp.png", EmailId: "[email protected]" },
    { Name: "Garth", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/7.png", EmailId: "[email protected]" },
    { Name: "Andrew James", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/pic04.png", EmailId: "[email protected]" },
    { Name: "Olivia", Status: "busy", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/5.png", EmailId: "[email protected]" },
    { Name: "Sophia", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/6.png", EmailId: "[email protected]" },
    { Name: "Margaret", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/3.png", EmailId: "[email protected]" },
    { Name: "Ursula Ann", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/dp.png", EmailId: "[email protected]" },
    { Name: "Laura Grace", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/4.png", EmailId: "[email protected]" },
    { Name: "Albert", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/pic03.png", EmailId: "[email protected]" },
    { Name: "William", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/8.png", EmailId: "[email protected]" }
  ];
  private  fieldsData: { [key: string]: string }={ text: 'Name' };

  private itemTemplate(data: any): JSX.Element {
    return (
      <table>
        <tr>
          <td>
            <div id="mention-TemplateList">
              <img className="mentionEmpImage" src={data.EmployeeImage} />
              <span className={"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"+ data.Status}></span>
            </div>
            </td>
            <td className="mentionNameList">
              <span className="person">{data.Name}</span>
              <span className="email">{data.EmailId}</span>
            </td>
          </tr>
        </table>
      );
  }

  private displayTemplate(data: any): JSX.Element {
    return (
      <React.Fragment>
         <a href={`mailto:${data.EmailId}`} title={data.EmailId}>@{data.Name}</a>
      </React.Fragment>
      );
  }
  public actionBegineHandler(args: any): void {
    if (args.requestType === 'EnterAction' && this.mentionObj.element.classList.contains('e-popup-open')) {
      args.cancel = true;
    }
  }
  private rteValue:string = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
    
  render() {
    return (
      <div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
            <RichTextEditorComponent id="mention_integration" value={this.rteValue} placeholder="Type @ and tag the name"  actionBegin={this.actionBegineHandler.bind(this)}  >
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
            </RichTextEditorComponent>
          </div>
        </div>

        <MentionComponent ref={(scope) => { this.mentionObj = scope; }} id="mentionEditor" target="#mention_integration_rte-edit-view" suggestionCount={8} showMentionChar={false}  allowSpaces={true} dataSource={this.data} fields={this.fieldsData} popupWidth="250px" popupHeight="200px" itemTemplate={this.itemTemplate} displayTemplate={this.displayTemplate}></MentionComponent>
      </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function App() {
    let rteValue = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
   
    let data = [
        { Name: "Selma Rose", Status: "active", EmployeeImage: "2.png", EmailId: "[email protected]" },
        { Name: "Maria", Status: "active", EmployeeImage: "1.png", EmailId: "[email protected]" },
        { Name: "Russo Kay", Status: "busy", EmployeeImage: "8.png", EmailId: "[email protected]" },
        { Name: "Camden Kate", Status: "active", EmployeeImage: "9.png", EmailId: "[email protected]" },
        { Name: "Robert", Status: "busy", EmployeeImage: "dp.png", EmailId: "[email protected]" },
        { Name: "Garth", Status: "active", EmployeeImage: "7.png", EmailId: "[email protected]" },
        { Name: "Andrew James", Status: "away", EmployeeImage: "pic04.png", EmailId: "[email protected]" },
        { Name: "Olivia", Status: "busy", EmployeeImage: "5.png", EmailId: "[email protected]" },
        { Name: "Sophia", Status: "away", EmployeeImage: "6.png", EmailId: "[email protected]" },
        { Name: "Margaret", Status: "active", EmployeeImage: "3.png", EmailId: "[email protected]" },
        { Name: "Ursula Ann", Status: "active", EmployeeImage: "dp.png", EmailId: "[email protected]" },
        { Name: "Laura Grace", Status: "away", EmployeeImage: "4.png", EmailId: "[email protected]" },
        { Name: "Albert", Status: "active", EmployeeImage: "pic03.png", EmailId: "[email protected]" },
        { Name: "William", Status: "away", EmployeeImage: "8.png", EmailId: "[email protected]" }
    ];
    let fieldsData = { text: 'Name' };
    function itemTemplate(data) {
        return (<table>
          <tr>
            <td>
              <div id="mention-TemplateList">
                <img className="mentionEmpImage" src={"src/rich-text-editor/images/" + data.EmployeeImage}/>
                <span className={"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom" + data.Status}></span>
              </div>
              </td>
              <td className="mentionNameList">
                <span className="person">{data.Name}</span>
                <span className="email">{data.EmailId}</span>
              </td>
            </tr>
          </table>);
    }
    function displayTemplate(data) {
        return (<React.Fragment>
           <a href={`mailto:${data.EmailId}`} title={data.EmailId}>@{data.Name}</a>
        </React.Fragment>);
    }
    function actionBegineHandler(args) {
        if (args.requestType === 'EnterAction') {
            args.cancel = true;
        }
    }
    return (<div className='control-pane'>
        <div className='control-section' id="rte">
        <div className='rte-control-section'>
            <RichTextEditorComponent id="mention_integration" value={rteValue} placeholder="Type @ and tag the name" actionBegin={actionBegineHandler.bind(this)}>
            <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
        </div>
        </div>
        <MentionComponent id="mentionEditor" target="#mention_integration_rte-edit-view" suggestionCount={8} showMentionChar={false} allowSpaces={true} dataSource={data} fields={fieldsData} popupWidth="250px" popupHeight="200px" itemTemplate={itemTemplate} displayTemplate={displayTemplate}></MentionComponent>
    </div>);
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function App() {
    let rteValue:string = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
   
    let mentionObj;
    let data: { [key: string]: Object }[] = [
      { Name: "Selma Rose", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/2.png", EmailId: "[email protected]" },
      { Name: "Maria", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/1.png", EmailId: "[email protected]" },
      { Name: "Russo Kay", Status: "busy", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/8.png", EmailId: "[email protected]" },
      { Name: "Camden Kate", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/9.png", EmailId: "[email protected]" },
      { Name: "Robert", Status: "busy", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/dp.png", EmailId: "[email protected]" },
      { Name: "Garth", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/7.png", EmailId: "[email protected]" },
      { Name: "Andrew James", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/pic04.png", EmailId: "[email protected]" },
      { Name: "Olivia", Status: "busy", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/5.png", EmailId: "[email protected]" },
      { Name: "Sophia", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/6.png", EmailId: "[email protected]" },
      { Name: "Margaret", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/3.png", EmailId: "[email protected]" },
      { Name: "Ursula Ann", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/dp.png", EmailId: "[email protected]" },
      { Name: "Laura Grace", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/4.png", EmailId: "[email protected]" },
      { Name: "Albert", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/pic03.png", EmailId: "[email protected]" },
      { Name: "William", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/8.png", EmailId: "[email protected]" }
    ];
    let  fieldsData: { [key: string]: string }={ text: 'Name' };
  
    function itemTemplate(data: any) {
      return (
        <table>
          <tr>
            <td>
              <div id="mention-TemplateList">
                <img className="mentionEmpImage" src={data.EmployeeImage} />
                <span className={"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"+ data.Status}></span>
              </div>
              </td>
              <td className="mentionNameList">
                <span className="person">{data.Name}</span>
                <span className="email">{data.EmailId}</span>
              </td>
            </tr>
          </table>
        );
    }

    function displayTemplate(data: any) {
      return (
        <React.Fragment>
           <a href={`mailto:${data.EmailId}`} title={data.EmailId}>@{data.Name}</a>
        </React.Fragment>
        );
    }

    function actionBegineHandler(args: any): void {
      if (args.requestType === 'EnterAction' && mentionObj.element.classList.contains('e-popup-open')) {
        args.cancel = true;
      }
    }
    return (
    <div className='control-pane'>
        <div className='control-section' id="rte">
        <div className='rte-control-section'>
            <RichTextEditorComponent id="mention_integration" value={rteValue} placeholder="Type @ and tag the name"  actionBegin={actionBegineHandler.bind(this)}  >
            <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
            </RichTextEditorComponent>
        </div>
        </div>
        <MentionComponent ref={(scope) => { mentionObj = scope; }} id="mentionEditor" target="#mention_integration_rte-edit-view" suggestionCount={8} showMentionChar={false}  allowSpaces={true} dataSource={data} fields={fieldsData} popupWidth="250px" popupHeight="200px" itemTemplate={itemTemplate} displayTemplate={displayTemplate}></MentionComponent>
    </div>
    );
}

export default App;

View Sample

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Mentions in React Rich Text Editor Component

Setup and configuration

Using mentions

Customizing suggestion list

Minimum input length for Mention suggestions

Customizing suggestion list count

Customizing suggestion list using templates

Item template

Display template

See also