Custom Ribbon
- 3 minutes to read
The Rich Text Editor allows you to customize its built-in Ribbon control.
View Demo: Ribbon Customization
You can access the ribbon settings with the Ribbon method.
Modify Tab Collection
Add Default Tabs
The Rich Text Editor provides methods that allow you to populate the ribbon with default tabs. For instance, use the AddHomeTab() method to add the Home tab to ribbon.
Note that the ribbon is initially populated with default tabs. To clear the collection, call the Clear() method.
@(Html.DevExpress().RichEdit("richEdit")
.Ribbon(ribbon => ribbon
.Tabs(tabs => {
tabs.Clear();
tabs.AddHomeTab()
//...
Add Custom Tabs
Use the following methods to add a custom tab to the ribbon.
| Method | Description |
|---|---|
| Add() | Adds a new tab to the end of the ribbon tab collection. |
| Add(String) | Adds a new tab with the specified title to the end of the ribbon tab collection. |
| Insert(Int32) | Inserts a new tab to the ribbon tab collection at the specified position. |
@(Html.DevExpress().RichEdit("richEdit")
.Ribbon(ribbon => ribbon
.Tabs(tabs => {
tabs.Clear();
tabs.Add("History")
.Items(items => {
items.AddUndoItem();
items.AddRedoItem();
//...
Remove Tabs
Use the following methods to remove tabs from the ribbon.
| Method | Description |
|---|---|
| Clear() | Removes all tabs from the ribbon tab collection. |
| RemoveAt(Int32) | Removes a tab at the specified position from the ribbon tab collection. |
| RemoveByTitle(String) | Removes a tab with the specified title from the ribbon tab collection. |
@(Html.DevExpress().RichEdit("richEdit")
.Ribbon(ribbon => ribbon
.Tabs(tabs => {
tabs.RemoveByTitle("References");
//...
Modify Context Tab Category Collection
Use the ContextTabCategories method to access a collection of context tab categories. You can clear, add and customize the default categories.
@(Html.DevExpress().RichEdit("richEdit")
.Ribbon(ribbon => ribbon
.ContextTabCategories(categories => {
categories.Clear();
categories.AddHeaderAndFooterContextTabCategory();
//...
Modify Item Collection
Add Default Items
A ribbon item collection provides a set of methods that allow you to add default items to a ribbon. For instance, use the AddUndoItem() and AddRedoItem() methods to add the Undo and Redo items.
@(Html.DevExpress().RichEdit("richEdit")
.Ribbon(ribbon => ribbon
.Tabs(tabs => {
tabs.Clear();
tabs.Add("History")
.Items(items => {
items.AddUndoItem();
items.AddRedoItem();
//...
Add Custom Items
Use the following methods to add custom items to a tab.
| Item Type | Add Methods | Insert Method |
|---|---|---|
| Button | AddButton | InsertButton(Int32) |
| Color Box | AddColorBox | InsertColorBox(Int32) |
| Menu | AddMenu() | InsertMenu(Int32) |
| Number Box | AddNumberBox | InsertNumberBox(Int32) |
| Select Box | AddSelectBox() | InsertSelectBox(Int32) |
| Toggle Button | AddToggleButton | InsertToggleButton(Int32) |
@(Html.DevExpress().RichEdit("richEdit")
.Ribbon(ribbon => ribbon
.Tabs(tabs => {
tabs.Clear();
tabs.Add()
.Title("Email")
.Items(items => {
items.AddButton()
.Text("Send Email")
.CommandName("sendEmail")
.ShowText(true)
.Icon("email");
});
})
)
.OnCustomCommandExecuted("onCustomCommandExecuted")
//...
To process a custom item click, handle the CustomCommandExecuted event. The commandName event argument returns the clicked item’s commandName property value and allows you to identify the clicked item.
function onCustomCommandExecuted(s, e) {
switch (e.commandName) {
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;
}
}
Remove Items
Use the following methods to remove items from a tab.
| Method | Description |
|---|---|
| Clear() | Removes all items from the tab item collection. |
| RemoveAt(Int32) | Removes an item at the specified position. |
@(Html.DevExpress().RichEdit("richEdit")
.Ribbon(ribbon => ribbon
.Tabs(tabs => {
tabs.GetByTitle("Home")
.Items(items => {
items.RemoveAt(0);
//...
Hide Ribbon
Set the Visible method to false to hide the ribbon.
@(Html.DevExpress().RichEdit("richEdit")
.Ribbon(ribbon => ribbon
.Visible(false)
//...