# rich-text-editor-mention

> Rich text editor with at-mention dropdown that inserts users from a suggestion list.

**Framework:** react  **Component:** RichTextEditor  **Variant:** mention

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/js/rich-text-editor-mention.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-dropdowns @syncfusion/ej2-react-richtexteditor
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/rich-text-editor-mention/RichTextEditor.jsx

```jsx
/**
 * Rich Text Editor Mention integration sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function MentionIntegration() {
    let mentionObj;
    const data = [
        { Name: "Selma Rose", Status: "active", Eimg: "2", EmailId: "selma@gmail.com" },
        { Name: "Maria", Status: "active", Eimg: "1", EmailId: "maria@gmail.com" },
        { Name: "Russo Kay", Status: "busy", Eimg: "8", EmailId: "russo@gmail.com" },
        { Name: "Camden Kate", Status: "active", Eimg: "9", EmailId: "camden@gmail.com" }
    ];
    const fieldsData = { text: 'Name' };
    function itemTemplate(data) {
        return (<table>
                <tr>
                    <td>
                        <div id="mention-TemplateList">
                            <img className="mentionEmpImage" src={"src/rich-text-editor/images/" + data.Eimg + ".png"}/>
                            <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' && 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" placeholder="Type @ and tag the name" actionBegin={actionBegineHandler.bind(this)}>
                        <p>Hello <span contentEditable={false} className='e-mention-chip'><a href="mailto:maria@gmail.com" title="maria@gmail.com">@Maria</a></span>, </p>
                        <p>Welcome to Mention demo, it easily integrates any editable element like input, textarea or any contenteditable supported element.</p>
                        <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat]}/>
                    </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} suffixText={'&nbsp;'}></MentionComponent>

        </div>);
}
export default MentionIntegration;
```