# rich-text-editor-mention

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

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

**Install Package(s)**

```bash
dotnet add package Syncfusion.AspNetCore.RichTextEditor
dotnet add package Syncfusion.AspNetCore.DropDowns
```

**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/rich-text-editor.cshtml

```cshtml
@page
@model EJ2CoreSampleBrowser.Pages.RichTextEditor.MentionIntegration

@using Syncfusion.EJ2
@using Syncfusion.EJ2.DropDowns;
@{
    char nameMentionChar = '@';
}

<div class="control-section">
    <div class="sample-container">
        <div class="default-section">
            <ejs-richtexteditor id="mention_integration" placeholder="Type @@ and tag the name" actionBegin="actionBegin">
                    <e-content-template>
                        <p>Hello <span contenteditable="false" class="e-mention-chip"><a href="mailto:maria@gmail.com" title="maria@gmail.com">@@Maria</a></span>&#8203;</p>
                        <p>Welcome to the mention integration with rich text editor demo. Type <code>@@</code> character and tag user from the suggestion list. </p>
                    </e-content-template>
            </ejs-richtexteditor>
            <ejs-mention id="mention" target="#mention_integration_rte-edit-view" created="onMentionCreate" mentionChar="@nameMentionChar" showMentionChar=true dataSource="@Model.mention" popupHeight="200px" popupWidth="250px" allowSpaces="true" suggestionCount="8" displayTemplate="<a href='mailto:${EmailId}' title=${EmailId}>${Name}</a>" itemTemplate="<table><tr><td><div id='mention-TemplateList'><img class='mentionEmpImage' src='../images/Mention/${Eimg}.png' 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>">
                 <e-mention-fields text="Name"></e-mention-fields>                                                                                                                                                                                      
            </ejs-mention>
        </div>
    </div>
</div>

    <style>
        #mention-TemplateList {
        position: relative;
        display: inline-block;
        padding:2px;
    }
    .person {
        display: block;
        line-height: 18px;
        text-indent: 5px;
        font-size: 16px;
    }
    .email {
        display: block;
        line-height: 22px;
        text-indent: 2px;
    }
    .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.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>
    <script type="text/javascript">
        var mentionObj;
        function actionBegin(args) {
            if (args.requestType === 'EnterAction' && mentionObj.element.classList.contains('e-popup-open')) {
                args.cancel = true;
            }
        }

        function onMentionCreate() {
            mentionObj = this;
        }
        
    </script>
```

### src/components/rich-text-editor-mention/rich-text-editor.cshtml.cs

```cs
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace EJ2CoreSampleBrowser.Pages.RichTextEditor;

public class MentionIntegration : PageModel
{
    public List<EmailData> mention = new List<EmailData>();
    public void OnGet()
    {
        mention.Add(new EmailData { Name = "Selma Rose", Status = "active", Eimg = "2", EmailId = "selma@gmail.com" });
        mention.Add(new EmailData { Name = "Maria", Status = "active", Eimg = "1", EmailId = "maria@gmail.com" });
        mention.Add(new EmailData { Name = "Camden Kate", Status = "active", Eimg = "9", EmailId = "camden@gmail.com" });
    }
}

public class EmailData
{
    public string Name { get; set; }
    public string Status { get; set; }
    public string Eimg { get; set; }
    public string EmailId { get; set; }
}
```