Example of Smart Suggestion in ASP.NET Core Rich Text Editor Control

This example demonstrates how to easily apply formatting or insert media and tables in the Rich Text Editor content using the Mention control. To use it, simply type the slash (/) key in the editor and select the desired format from the suggestion list that appears.

DEMO
SOURCE

The @mention control is integrated into the Rich Text Editor and shows the suggestion list when the slash (/) key is pressed in an editor and applies suggested formats. To achieve this, the sample is customized for the Mention and Rich Text Editor.

  • Prevent the @mention default selection action by setting the args.cancel as true at the select event.
  • Get the command name from the Mention control, select an event, and pass it to the public method executeCommand to perform the specified formats on the selected text in an editor.

The following formats are shown in the mention suggestion list; apply them in an editor.

  • Basic blocks - The Rich Text Editor supports basic text formatting blocks, including paragraph, headings, code, quotation, lists, and table making it easier for users to structure their content. When a user selects a basic block format, it will be applied to the next line or paragraph.
  • Inline formats - The Rich Text Editor supports inline formatting, allowing you to add emojis to the specific text within the content.
  • Media formats - The Rich Text Editor also supports media formats, including images, videos, and audio, making it an efficient tool for the content creation.
Transform your ASP.NET Core web apps today with Syncfusion ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE