# rich-text-editor-mention

> Rich Text Editor integrates mention suggestions into editable content alongside the standard rich-text editing toolbar.

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

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.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.razor

```razor
@page "/rich-text-editor/mention-integration"
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.RichTextEditor

<div class="control-section">
    <SfRichTextEditor ID="mentionIntegration">
        <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>
    </SfRichTextEditor>
</div>
     <div id="mention_integration">
    <SfMention TItem="PersonData" Target="#mentionIntegration .e-rte-content .e-content" DataSource="@EmailData" SuggestionCount=8 AllowSpaces="true" PopupHeight="200px" PopupWidth="250px" SuffixText=" ">
            <ItemTemplate>
                <table>
                    <tr>
                        <td><div id="mention-TemplateList"><img class="mentionEmpImage" src="https://cdn.syncfusion.com/blazor/images/dropdown-list/employees/EmployeeImage).png" alt="Employee Profile" />
                            <span class="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom @((context as PersonData).Status)"></span></div></td>
                        <td><span class="person">@((context as PersonData).Name)</span><span class="email">@((context as PersonData).EmailId)</span></td>
                    </tr>
                </table>
            </ItemTemplate>
            <DisplayTemplate>
                <a href="mailto:@((context as PersonData).EmailId)" title="@((context as PersonData).EmailId)">@@@((context as PersonData).Name)</a>
            </DisplayTemplate>
            <ChildContent>
            <MentionFieldSettings Text="Name"></MentionFieldSettings>
            </ChildContent>
        </SfMention>
    </div>
<style>
    #mention-TemplateList {
        position: relative;
        display: inline-block;
        padding: 2px;
    }
    .person, .email {
        display: block;
        line-height: 20px;
        text-indent: 5px;
    }
    .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>
@code {
    public class PersonData
    {
        public string? Name { get; set; }
        public string? EmailId { get; set; }
        public string? EmployeeImage { get; set; }
        public string? Status { get; set; }
    }
    private List<PersonData> EmailData = new List<PersonData>
    {
        new PersonData() { Name = "Selma Rose", Status = "active", EmployeeImage = "2", EmailId = "selma@gmail.com" },
        new PersonData() { Name = "Russo Kay", Status = "away", EmployeeImage = "8", EmailId = "russo@gmail.com" },
        new PersonData() { Name = "Camden Kate", Status = "busy", EmployeeImage = "9", EmailId = "camden@gmail.com" },
    };
}
```