This example demonstrates how to use the slash menu feature of the Rich Text Editor to apply formats, open dialogs easily.
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
slashMenuSettings 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 slashMenuItemSelect event.
Adding Custom Slash Menu Items
The custom items can be added to the slash menu by defining the items child property within
slashMenuSettings. 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.Injecting Module
Rich Text Editor component features are segregated into individual feature-wise modules. To use Rich Text Editor feature, we need to inject HtmlEditor, Toolbar, Image, Audio, Table, Video, Link, QuickToolbar, EmojiPicker, PasteCleanup, FormatPainter, SlashMenu modules into the services.