# rich-text-editor-mention

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

**Framework:** vue  **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/vue/rich-text-editor-mention.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-dropdowns @syncfusion/ej2-vue-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.vue

```vue
<template>
    <div>
        <div class="control-section">
            <div class="sample-container">
                <div class="default-section">
                    <ejs-richtexteditor id="mention_integration"  placeholder="Type @ and tag the name">
                        <p>Hello <span contenteditable="false" class="e-mention-chip"><a href="mailto:maria@gmail.com" title="maria@gmail.com">@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>
                    </ejs-richtexteditor>
                </div>
                <ejs-mention ref="mentionObj" id="mentionEditor" target="#mention_integration_rte-edit-view" :suggestionCount="8" :showMentionChar="false" :allowSpaces="true" :dataSource="data" :fields="fieldsData" 
                popupWidth='250px' popupHeight='200px' :itemTemplate="'iTemplate'" :displayTemplate="'dTemplate'" suffixText=' '>
                    <template v-slot:iTemplate="{data}">
                       <table><tr><td><div id="mention-TemplateList"><img class="mentionEmpImage" :src="data.Eimg" alt="employee" /><span :class="'e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom'+ data.Status"></span></div></td><td class="mentionNameList"><span class="person">{{data.Name}}</span><span class="email">{{data.EmailId}}</span></td></tr></table>
                    </template>
                    <template v-slot:dTemplate="{data}">                
                            <a :href="'mailto:' + data.EmailId" :title="data.EmailId">@{{data.Name}}</a>
                    </template>
                </ejs-mention>
            </div>
        </div>

    </div>
</template>
<script>
import { RichTextEditorComponent, Toolbar, Link, Image, QuickToolbar, HtmlEditor, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from "@syncfusion/ej2-vue-richtexteditor";
import { MentionComponent } from "@syncfusion/ej2-vue-dropdowns";

    const emailData = [
        {
            "Name": "Selma Rose",
            "Status": "active",
            "Eimg": "https://ej2.syncfusion.com/vue/demos/styles/images/Employees/2.png",
            "EmailId": "selma@gmail.com"
        },
        {
            "Name": "Maria",
            "Status": "active",
            "Eimg": "https://ej2.syncfusion.com/vue/demos/styles/images/Employees/1.png",
            "EmailId": "maria@gmail.com"
        },
        {
            "Name": "Russo Kay",
            "Status": "busy",
            "Eimg": "https://ej2.syncfusion.com/vue/demos/styles/images/Employees/8.png",
            "EmailId": "russo@gmail.com"
        }
    ];

export default {
    components: {
      'ejs-richtexteditor': RichTextEditorComponent,
      'ejs-mention': MentionComponent
    },
    data: function() {
        return {
          data: emailData,
          fieldsData: { text: 'Name' },
        };
    },
    provide:{
        richtexteditor:[Toolbar, Link, Image, QuickToolbar, HtmlEditor, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat]
    }
}
</script>

<style scoped>
    #mention-TemplateList {
        position: relative;
        display: inline-block;
        padding: 2px;
    }
    .mentionNameList .person, .mentionNameList.email {
        display: block;
        line-height: 20px;
        text-indent: 5px;
    }
    .mentionNameList .person {
        font-size: 16px;
    }
    .mentionEmpImage {
        display: inline-block;
        width: 46px;
        height: 46px;
        padding: 3px;
        border-radius: 25px;
    }
    #mention-TemplateList .e-badge-success {
        left: 76%;
        bottom: 4px;
        top: auto;
    }
    #mention_integration_rte-edit-view_popup .e-dropdownbase .e-list-item {
        line-height: 8px;
    }
    #mention-TemplateList .e-badge-success {
        background-color: #4d841d;
		color: #fff;
    }
    #mention-TemplateList .e-badge-success.away {
        background-color: #fedd2d;
		color: #fff;
    }
	#mention-TemplateList .e-badge-success.busy {
        background-color: #de1a1a;
		color: #fff;
    }
    #mention-TemplateList .e-badge.e-badge-dot {
        height: 10px;
        width: 10px;
    }
    #mention_integration .e-mention-chip{
        cursor: pointer;
    }
</style>

```

### src/components/rich-text-editor-mention/RichTextEditorView.vue

```vue
<template>
  <RTE />
</template>

<script setup>
import RTE from '../../components/RichTextEditor.vue'
</script>
```