Blazor Rich Text Editor Example - Smart Suggestion

This sample demonstrates the SlashMenu feature of the Rich Text Editor, which allows you to apply formatting options, insert media, and add tables using the Mention component. Type the slash (/) key inside the editor to view a contextual suggestion list and easily apply the desired action.

The SlashMenu feature allows users to apply formatting such as headings, lists, quotes, open insert dialogs, and execute custom commands within the editor. The slash menu is triggered by typing the "/" character.

In this example, the slash menu is enabled by setting the Enable property within RichTextEditorSlashMenuSettings to true. This example includes two Custom Slash Menu Items that allow easy insertion of meeting notes and signatures into the content.

The slash menu is configured with the following properties:

• Enable - Enables or disables the slash menu in the editor. Default value is false.
• Items - Defines the items displayed in the slash menu popup. Custom items can be added, and their actions can be handled using the SlashMenuItemSelected event.

Adding Custom Slash Menu Items:

Custom items can be added to the slash menu by defining the Items child property. Each item object can include:

• Text - Sets the displayed text for the slash menu item.
• Command - Specifies the action to execute when the slash menu item is clicked.
• Type - Groups related items within the slash menu.
• IconCss - Sets the CSS class for the associated item icon.
• Description - Provides a description for the slash menu item.