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 the SlashMenu Module The SlashMenu feature is provided as an injectable module. To use it, inject the module using the following code: RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, SlashMenu);