Syncfusion AI Assistant

How can I help you?

Mentions in EJ2 TypeScript Rich Text Editor control

17 Nov 202519 minutes to read

By integrating the Mention control with a Rich Text Editor, users can effortlessly mention or tag other users or objects from a suggested list. This eliminates the need to manually type out names or identifying information, improving efficiency and accuracy.

Setup and configuration

Use the target property of the Mention control 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 the user types the @ symbol followed by a character, the Rich Text Editor displays a list of suggestions. 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 control. 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.

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, PasteCleanup, Table, Video, Audio } from '@syncfusion/ej2-richtexteditor'; 
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, PasteCleanup, Table, Video, Audio);
import { Mention } from '@syncfusion/ej2-dropdowns';

let emailData: { [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 emailObj: Mention;
let defaultRTE: RichTextEditor = new RichTextEditor({
  placeholder: 'Type @ and tag the name',
});
defaultRTE.appendTo('#mention_integration');

// Initialize Mention component.
emailObj = new Mention({
  dataSource: emailData,
  fields: { text: 'Name' },
  target: defaultRTE.inputElement,
  minLength: 3,
});
emailObj.appendTo('#mentionEditor');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Rich Text Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-richtexteditor/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="mentionEditor"></div>
            <div id="mention_integration">
                 <p>
                Hello
                <span contenteditable="false" class="e-mention-chip"
                  ><a href="mailto:[email protected]" title="[email protected]"
                    >Maria</a
                  ></span
                >
              </p>

              <p>
                Type <code>@</code> followed by at least
                <strong>3 characters</strong> to trigger the suggestion list.
              </p>
            </div>
    </div>
</body>

</html>

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 (@).

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, PasteCleanup, Table, Video, Audio } from '@syncfusion/ej2-richtexteditor'; 
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, PasteCleanup, Table, Video, Audio);
import { Mention } from '@syncfusion/ej2-dropdowns';

let emailData: { [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 emailObj: Mention;
let defaultRTE: RichTextEditor = new RichTextEditor({
  placeholder: 'Type @ and tag the name',
});
defaultRTE.appendTo('#mention_integration');

// Initialize Mention component.
emailObj = new Mention({
  dataSource: emailData,
  fields: { text: 'Name' },
  target: defaultRTE.inputElement,
  suggestionCount: 5,

});
emailObj.appendTo('#mentionEditor');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Rich Text Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-richtexteditor/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="mentionEditor"></div>
            <div id="mention_integration">
                  <p>
                    Hello
                    <span contenteditable="false" class="e-mention-chip"
                      ><a href="mailto:[email protected]" title="[email protected]"
                        >Maria</a
                      ></span
                    >&#8203;
                  </p>
                  <p>The suggestion list displays only 5 items when typing the &#64; character, as the data source contains a large set of entries</p>
            </div>
    </div>
</body>

</html>

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.
import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);
import { Mention } from '@syncfusion/ej2-dropdowns';

let emailData: { [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 emailObj: Mention;

let editor: RichTextEditor = new RichTextEditor({
    placeholder: 'Type @ and tag the name',
    actionBegin: (args) => {
        if (args.requestType === 'EnterAction' && emailObj.element.classList.contains('e-popup-open')) {
            args.cancel = true;
        }
    },
        value: `<p>Hello <span contenteditable="false" class="e-mention-chip"><a href="mailto:[email protected]" title="[email protected]">@Maria</a></span>,</p>
            <p>Welcome to the mention integration with rich text editor demo. Type <code>@</code> character and tag user from the suggestion list. </p>`
    });
editor.appendTo('#mention_integration');

// Initialize Mention control
    emailObj = new Mention({
    dataSource: emailData,
    fields: { text: 'Name' },
    suggestionCount: 8,
    displayTemplate: '<a  href=mailto:${EmailId} title=${EmailId}>@${Name}</a>',
    itemTemplate: '<table><tr><td><div id="mention-TemplateList"><img class="mentionEmpImage" src="${EmployeeImage}" alt="employee" /><span class="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom ${Status}"></span></div></td><td><span class="person">${Name}</span><span class="email">${EmailId}</span></td</tr></table>',
    popupWidth: '250px',
    popupHeight: '200px',
    target: '#mention_integration_rte-edit-view',
    allowSpaces: true

});
emailObj.appendTo('#mentionEditor');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Rich Text Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-richtexteditor/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="mentionEditor"></div>
            <div id="mention_integration"></div>
    </div>
</body>

</html>

View Sample

See also