DxHtmlEditorMention Class
Defines a mention list.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
Declaration
public class DxHtmlEditorMention :
DxSettingsComponent<HtmlEditorMentionModel>
Remarks
<DxHtmlEditor>
supports mentions that allow a user to reference other users in text or conversation threads. When a user types a predefined marker, the editor displays a drop-down list of available names. The component allows you to use multiple mention lists. To identify a mention list, use a unique marker.
Create a Mention List
Follow the steps below to create and configure a mention list:
- Add a
DxHtmlEditorMention
object to the DxHtmlEditorMentions collection. - Use the DxHtmlEditorMention.Data property to specify a data source for mentions.
- Specify the DisplayFieldName property to obtain display values for mentions from data source fields.
- Assign a unique marker to the Marker property.
- Specify the SearchFieldNames property to enable search operations for mentions.
- Optional. Use SearchMinLength and SearchDelay properties to configure search settings.
Example
The following code snippet implements mentions to emulate the functionality common to many collaboration tools:
<DxHtmlEditor Markup="@Markup" Height="200px">
<DxHtmlEditorMentions>
<DxHtmlEditorMention Data="@EmployeesData"
DisplayFieldName="@nameof(MentionData.Name)"
SearchFieldNames="@SearchFieldNames" />
</DxHtmlEditorMentions>
</DxHtmlEditor>
@code {
string Markup = @"<p>
<span class='dx-mention' spellcheck='false' data-marker='@' data-mention-value='Kevin Carter'>
<span>
<span>@</span>
Kevin Carter
</span>
</span>
I think John's expertise can be very valuable in our startup.
</p>";
string[] SearchFieldNames = { nameof(MentionData.Name) };
class MentionData {
public string Name { get; set; }
public string Team { get; set; }
}
MentionData[] EmployeesData = {
new MentionData() { Name = "John Heart", Team = "Engineering" },
new MentionData() { Name = "Kevin Carter", Team = "Engineering" },
new MentionData() { Name = "Olivia Peyton", Team = "Management" },
new MentionData() { Name = "Robert Reagan", Team = "Management" },
new MentionData() { Name = "Cynthia Stanwick", Team = "Engineering" },
new MentionData() { Name = "Brett Wade", Team = "Analysis" },
new MentionData() { Name = "Greta Sims", Team = "QA" },
};
}
Inheritance
Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.Internal.HtmlEditorMentionModel>
DxHtmlEditorMention
See Also