Rich Edit - Ribbon

The ASP.NET Core Rich Text Editor control allows you to provide a custom ribbon for your application. This demo shows how to display default and custom items in the ribbon.

The ribbon tab’s Items collection provides a set of methods that allow you to add default items to a ribbon (for instance, in this demo the AddUndoItem and AddRedoItem methods).

Use the AddButton method to populate the ribbon with custom items. To process the item click, handle the OnCustomCommandExecuted event. The commandName event argument returns the clicked item’s CommandName property value and allows you to identify the clicked item.

Backend API

<script src="~/DemosScripts/ribbonCustomization.js"></script> @(Html.DevExpress().RichEdit("DemoRichEdit") .Ribbon(ribbon => ribbon .Visible(true) .ActiveTabIndex(1) .Tabs(tabs => { tabs.Clear(); tabs.AddHomeTab() .Items(items => { items.Clear(); items.AddUndoItem(); items.AddRedoItem(); items.AddFontNameItem(); items.AddFontSizeItem(); items.AddBoldItem().ShowText(true); items.AddItalicItem().ShowText(true); items.AddUnderlineItem().ShowText(true); }); tabs.Add() .Title("Email") .Items(items => { items.AddButton() .Text("Insert Email Signature") .CommandName("insertEmailSignature") .ShowText(true) .Icon("user"); items.AddButton() .Text("Send Email") .CommandName("sendEmail") .ShowText(true) .Icon("email"); items.AddPrintDocumentItem().BeginGroup(true); items.AddDownloadDocumentItem(); }); }) ) .OnCustomCommandExecuted("onCustomCommandExecuted") .OnDocumentLoaded("onDocumentLoaded") .Height(600) .ConfirmOnLosingChanges(c => c.Enabled(false)) )

using Microsoft.AspNetCore.Mvc; namespace AspNetCoreDemos.RichEdit { [Route("[action]")] public class RichEditController : Controller { public IActionResult RibbonCustomization() { return View(); } } }

function onCustomCommandExecuted(s, e) { switch (e.commandName) { case 'insertEmailSignature': s.document.insertParagraph(s.document.length); s.document.insertText(s.document.length, '_________'); s.document.insertParagraph(s.document.length); s.document.insertText(s.document.length, 'Best regards,'); s.document.insertParagraph(s.document.length); s.document.insertText(s.document.length, 'John Smith'); s.document.insertParagraph(s.document.length); s.document.insertText(s.document.length, 'john@example.com'); s.document.insertParagraph(s.document.length); s.document.insertText(s.document.length, '+1 (818) 844-0000'); break; case 'sendEmail': var text = s.document.getText(); var mailto_link = 'mailto:bob@example.com?subject=Test&body=' + encodeURIComponent(text); window = window.open(mailto_link, 'emailWindow'); if(window && window.open && !window.closed) window.close(); break; } } function onDocumentLoaded(s, e) { s.document.insertText(0, 'Dear Mr Stanley,'); s.document.insertParagraph(s.document.length); var startPosition = s.document.length; s.document.insertParagraph(startPosition); s.document.insertText(startPosition, '[Type your text here]'); s.selection.setSelection(new DevExpress.RichEdit.Interval(startPosition, s.document.length - startPosition)); s.focus(); }