Blazor Rich Text Editor Example - Smart Suggestion

This sample demonstrates the SlashMenu feature of the Rich Text Editor, which allows users to apply formatting such as headings, lists, quotes, open insert dialogs, and execute custom commands within the editor. The slash menu can be triggered by typing the "/" character in the editor.

In this example, the slash menu is enabled by setting the Enable property within the RichTextEditorSlashMenuSettings to true.

This example includes two Custom Slash menu items that allow you to easily insert meeting notes and a signature into the content.

The slash menu is configured with the following properties:

• Enable: Enables or disables the slash menu in the editor. The default value is false.

• Items: Defines the items displayed in the slash menu popup. Custom items can also be added, and their actions can be handled using the SlashMenuItemSelected event.

Adding Custom Slash Menu Items

The custom items can be added to the slash menu by defining the Items child property within SlashMenuItemSelected. The Items property accepts a string of items and also an array of objects, where each object represents a custom slash menu item. These objects can include the following properties:

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