How to Implement a Context Menu in ASP.NET Core Rich Text Editor?

The ASP.NET Core RichTextEditor does not include a built-in context menu feature. However, you can implement a custom context menu that appears when right-clicking inside the Rich Text Editor. Below is a sample implementation to guide you through the process.

Sample Implementation

Rich Text Editor Configuration

You can set up the Rich Text Editor and the context menu as follows:

<ejs-richtexteditor id="contextmenu_integration" created="created">
    <e-content-template>
        <p>
            Rich Text Editor allows inserting video and audio from online sources
            and local computers where you want to insert video and audio into your content.
        </p>
    </e-content-template>
</ejs-richtexteditor>

<ejs-contextmenu id="contextmenu" target="#contextmenu_integration_rte-edit-view" items="@Model.Menuitems" beforeItemRender="beforeItemRender" select="handleMenuSelect">
</ejs-contextmenu>

Defining Menu Items

Define the menu items for the context menu as follows:

Menuitems = new List<ContextMenuItem>() {
    new ContextMenuItem { Text = "Bold", IconCss = "e-cm-icons e-bold", Id = "boldCommand" },
    new ContextMenuItem { Text = "Italic", Id = "italic" },
    new ContextMenuItem { Text = "Underline", Id = "underline" },
    new ContextMenuItem
    {
        Text = "Heading",
        Items = new List<ContextMenuItem>
        {
            new ContextMenuItem { Text = "Heading 1", Id = "heading1" },
            new ContextMenuItem { Text = "Heading 2", Id = "heading2" },
            new ContextMenuItem { Text = "Heading 3", Id = "heading3" },
            new ContextMenuItem { Text = "Heading 4", Id = "heading4" },
            new ContextMenuItem { Text = "Heading 5", Id = "heading5" },
            new ContextMenuItem { Text = "Heading 6", Id = "heading6" }
        }
    }
};

Handling Menu Selection

Implement the handleMenuSelect function to execute commands based on the selected menu item:

function handleMenuSelect(args) {
    switch (args.item.id) {
        case 'italic':
            editor.executeCommand('italic');
            break;
        case 'underline':
            editor.executeCommand('underline');
            break;
        // Add additional cases for other menu items
        default:
            console.log('No valid heading selected');
            break;
    }
}

Screenshot Reference

Conclusion

This implementation allows you to create a custom context menu for the Rich Text Editor, enhancing the user experience by providing quick access to formatting options.

Additional References

Did you find this information helpful?

Yes

Comments (0)