Implement User Tagging in Blazor Rich Text Editor with Mention Component
Tags: blazor, webdev, csharp, dotnet
Published: 2023-01-10 13:20:22

---
title: Implement User Tagging in Blazor Rich Text Editor with Mention Component
published: true
date: 2023-01-10 12:05:55 UTC
tags: blazor, webdev, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/user-tagging-in-blazor-rich-text-editor.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llmvxu92k9k02123asfe.png
---
With the [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4") release, the Syncfusion [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor "Blazor Rich Text Editor") allows users to integrate the new [Mention component](https://www.syncfusion.com/blazor-components/blazor-mention "Blazor @Mention Component") easily. When the user types the  **@**  character in the editor, a suggestion list will appear, and the user can choose or tag a value from it. This can be a useful feature for apps that need to support tagging or mentioning users or items while editing content. This blog will show you how to integrate Mention with the Rich Text Editor.

Let’s see how to do so with code examples!

**Note:** Before getting started, please refer to the Syncfusion [Blazor Rich Text Editor ](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started "Getting Started with Blazor Rich Text Editor component")and [Mention ](https://blazor.syncfusion.com/documentation/mention/getting-started "Getting Started with Blazor Mention component")component documentation. This will help ensure that you are familiar with the components and how to use them effectively in your app.

## Prerequisites

- [Visual Studio 2022](https://visualstudio.microsoft.com/vs/ "Visual Studio 2022")
- [.NET Core 6.0 or above](https://dotnet.microsoft.com/en-us/download/dotnet/6.0 "Download .NET 6.0")
- [Blazor templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=windows#blazor-template-options "Blazor templates")

## Implement user tagging with Mention in Blazor Rich Text Editor

### Step 1: Create a Blazor server app.

First, create a new [Blazor server app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro "Build your Blazor app documentation") using [Visual Studio](https://visualstudio.microsoft.com/vs/ "Visual Studio 2022"). Then, install the [Syncfusion Blazor NuGet packages](https://www.nuget.org/packages/Syncfusion.Blazor "Syncfusion Blazor NuGet packages") and configure the style and script references by referring to the [getting started documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio "Getting started with Blazor Server Side App in Visual Studio").

### Step 2: Add the Blazor Rich Text Editor.

Next, add the following code in the **Index.razor** page to add the [Syncfusion Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor "Blazor Rich Text Editor") component.

```xml
<SfRichTextEditor ID="mentionIntegration">
</SfRichTextEditor>
```

### Step 3: Add the Mention component.

Add the following code to the **Index.razor** page to add the Syncfusion Blazor Mention component.

```xml
<SfMention TItem="PersonData"> 
</SfMention>
```

### Step 4: Integrate the Mention component with Rich Text Editor.

Configure the [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_Target "Target property of Blazor Mention component") property of the Blazor Mention component with Rich Text Editor’s editable area **div** element ID. Or else, configure the CSS class selectors in the Rich Text Editor with the **Target** property of the Mention component.

```xml
<SfMention TItem="PersonData" Target="#mentionIntegration .e-rte-content .e-content"> 
</SfMention>
```

### Step 5: Bind the data source in the Mention component.

Next, we will bind an employee data source to the Mention component using the **DataSource** property and configure the **MentionFieldSettings.Text** and **MentionFieldSettings.Value** properties.

Specify the column name in the data source whose data needs to be displayed in the suggestion list.

Refer to the following code example.

```xml
<SfMention TItem="PersonData" Target="#mentionIntegration .e-rte-content .e-content" DataSource="@EmployeeData">
   <ChildContent>
      <MentionFieldSettings Text="Name" Value="EmailId"></MentionFieldSettings>
   </ChildContent>
</SfMention>

@code {
    public class PersonData
    {
        public string Name { get; set; }
        public string EmailId { get; set; }
        public string EmployeeImage { get; set; }
        public string Status { get; set; }
    }
    List<PersonData> EmployeeData = 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" }
    };
}
```

### Step 6: Customize the suggestion list and the appearance of the selected value.

Use the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate "ItemTemplate property of Blazor Mention component") property to customize the suggestion list items. Use the [DisplayTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_DisplayTemplate "DisplayTemplate property of Blazor Mention component") property to customize the selected value in the suggestion list of the Mention component.

Refer to the following code example.

```xml
<SfMention TItem="PersonData" Target="#mentionIntegration .e-rte-content .e-content" DataSource="@EmployeeData">
    <ItemTemplate>
        <table>
            <tr>
                <td>
                    <div id="mention-TemplateList">
                        <img class="mentionEmpImage" src="employees/@((context as PersonData).EmployeeImage).png" alt="employee" />
                        <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 title="@((context as PersonData).EmailId)">@@@((context as PersonData).Name)</a>
    </DisplayTemplate>
    <ChildContent>
        <MentionFieldSettings Text="Name" Value="EmailId"></MentionFieldSettings>
    </ChildContent>
</SfMention>
```

Then, add the following styles to the **Index.razor** file to customize the Mention suggestion list items and select a value from the suggestion list.

```xml
<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;
    }
</style>
```

After executing these code examples, we will get output like in the following GIF image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Integrating-Blazor-Mention-Component-with-the-Rich-Text-Editor.gif" alt="Integrating Blazor Mention Component with the Rich Text Editor" style="width:100%">

  <figcaption>Integrating Blazor Mention Component with the Rich Text Editor</figcaption>

</figure>

## GitHub reference

For more details, refer to [Integrating Blazor Mention Component with Rich Text Editor demo on the GitHub](https://github.com/SyncfusionExamples/blazor-mention-integration-with-rich-text-editor "Integrate Blazor Mention Component with Rich Text Editor demo on GitHub") repository.

## Conclusion

Thanks for reading! In this blog, we have seen how to integrate the [Blazor Mention component](https://www.syncfusion.com/blazor-components/blazor-mention "Blazor @Mention Component") with the [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor "Blazor Rich Text Editor") to tag a username or select a value from a suggestion list. Try out the steps in this blog and provide your feedback!

Try our Blazor components by downloading a [free 30-day trial](https://www.syncfusion.com/account/manage-trials/downloads "Free evaluation of the Syncfusion Essential Studio") or our [NuGet packages](https://www.nuget.org/packages/Syncfusion.Blazor "Blazor NuGet packages"). Feel free to look at our [online examples](https://blazor.syncfusion.com/ "Syncfusion Blazor demos") and [documentation](https://blazor.syncfusion.com/documentation/introduction/ "Syncfusion Blazor documentation") to explore other available features.

You can also contact us through our [support forum](https://www.syncfusion.com/forums/blazor-components "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/support/tickets "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [A Simple To-Do App Using JS Interop with HTML5 Drag and Drop in Blazor WebAssembly](https://www.syncfusion.com/blogs/post/to-do-app-using-js-interop-with-html5-drag-and-drop-in-blazor-webassembly.aspx "Blog: A Simple To-Do App Using JS Interop with HTML5 Drag and Drop in Blazor WebAssembly")
- [Interview with Azure Maps Using Blazor Succinctly Author Michael Washington](https://www.syncfusion.com/blogs/post/interview-with-azure-maps-using-blazor-succinctly-author-michael-washington.aspx "Blog: Interview with Azure Maps Using Blazor Succinctly Author Michael Washington")
- [A Full-Stack Web App Using Blazor WebAssembly and GraphQL—Part 7](https://www.syncfusion.com/blogs/post/a-full-stack-web-app-using-blazor-webassembly-and-graphql-part-7.aspx "Blog: A Full-Stack Web App Using Blazor WebAssembly and GraphQL—Part 7")
- [Boosting Performance of Blazor Gantt Chart Using Virtualization](https://www.syncfusion.com/blogs/post/boosting-performance-of-blazor-gantt-chart-using-virtualization.aspx "Blog: Boosting Performance of Blazor Gantt Chart Using Virtualization")