Mention Integration in Blazor RichTextEditor
7 Oct 20255 minutes to read
By integrating the Mention component with a Rich Text Editor, users can easily mention or tag other users or objects from the suggested list without manually typing names or identifiers.
The Target property of the Mention component specifies the ID of the content-editable div element in the Rich Text Editor to bind the Mention component. This allows you to enable the Mention functionality within the Rich Text Editor, allowing users to tag items from the suggestion list during text editing.
Typing the @ symbol followed by a character displays a list of suggestions for selection. Users can select an item by clicking or typing its name.
In the following sample, the following properties are configured along with popup dimensions:
- AllowSpaces - Allow to continue search action if user enter space after mention character while searching.
- SuggestionCount - The maximum number of items that will be displayed in the suggestion list.
- ItemTemplate - Displays customized appearance in the suggestion list.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor ID="mentionIntegration">
<p>Hello
<span contenteditable="false" class="e-mention-chip"><a href="mailto:[email protected]" title="[email protected]">@@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 id="mention_integration">
<SfMention TItem="PersonData" Target="#mentionIntegration_rte-editable" DataSource="@EmailData" SuggestionCount=8 AllowSpaces="true" PopupHeight="200px" PopupWidth="250px">
<ItemTemplate>
<table>
<tr>
<td><div id="mention-TemplateList"><img class="mentionEmpImage" src="/images/@((context as PersonData).EmployeeImage)" 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 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;}
}
List<PersonData> EmailData = new List<PersonData> {
new PersonData() { Name="Selma Rose", Status = "active", EmployeeImage="2.png", EmailId="[email protected]" },
new PersonData() { Name="Russo Kay", Status = "away", EmployeeImage="8.png", EmailId="[email protected]" },
new PersonData() { Name="Camden Kate", Status = "busy", EmployeeImage="9.png", EmailId="[email protected]" },
new PersonData() { Name="Garth", Status = "active", EmployeeImage="7.png", EmailId="[email protected]" },
new PersonData() { Name="Ursula Ann", Status = "busy", EmployeeImage="3.png", EmailId="[email protected]" },
new PersonData() { Name="Margaret", Status = "active", EmployeeImage="10.png", EmailId="[email protected]" },
new PersonData() { Name="Laura Grace", Status = "away", EmployeeImage="1.png", EmailId="[email protected]" },
new PersonData() { Name="Robert", Status = "busy", EmployeeImage="dp.png", EmailId="[email protected]" },
new PersonData() { Name="Albert", Status = "away", EmployeeImage="8.png", EmailId="[email protected]" },
new PersonData() { Name="Michale", Status = "active", EmployeeImage="4.png", EmailId="[email protected]" },
new PersonData() { Name="Andrew James", Status = "active", EmployeeImage="db.png", EmailId="[email protected]" },
new PersonData() { Name="William", Status = "active", EmployeeImage="10.png", EmailId="[email protected]" }
};
}