Skip to main content Skip to footer

C1Editor RibbonUI Customization

ComponentOne Editor for ASP.Net is a powerful editing control which allows users to author and manage HTML content on any Web page. It implements the Microsoft Office 2007-style Ribbon interface. The Ribbon organizes related commands under a series of tabs, enabling users to easily explore the editor's functions without forcing them to navigate through a hierarchy of menus. The most commonly faced problem for users is how to customize the C1Editor RibbonUI elements. In customization, users can choose to edit the text and tooltips of the existing toolbar. Also, you can choose to customize the editor to show only the toolbars that you need: choose from Common, EditorMode, Formatting, HTMLElements, Style, and TableEditing toolbars. In this blog, we will explain how to change the text and tooltips of all the options available in the C1Editor. Also, we would explain how you can remove a tabpage or remove few buttons in the group. This customization is most useful when user wants to localize the C1Editor’s Ribbon elements. The C1Editor control has two tabpages – Format and Insert. Each tabpage consists of multiple groups. These toolbar groups may have Toolbarbutton, ToolBarGroup, ToolBarSplitButton, etc.

Format TabPage Customization

We will start from the first tabpage - “Format”. The Format tabpage has following Groups :

  1. Actions
  2. Font
  3. Paragraph
  4. Review

The first step is to change the name of the Format tab and its Groups. To do that we need to set the ‘HeaderText’ property of the groups as follows :

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page_Format].Text = "FORMAT";  

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Action].HeaderText = "ACTION";  

C1Editor1.RibbonUI.TabPages[0].Groups[1].HeaderText = "FONT";  

C1Editor1.RibbonUI.TabPages[0].Groups[2].HeaderText = "PARAGRAPH";  

C1Editor1.RibbonUI.TabPages[0].Groups[C1EditorConst.Group_Review].HeaderText = "REVIEW";

Actions Group has following toolbar controls :

  1. Save ToolbarButton
  2. Redo/Undo Group
  3. Preview/Print Group
  4. Cut, Copy, Paste, Select All Group

Now, to customize the text and tooltips we can either use the indexing or we can use C1EditorConst which is an enumeration which defines all the tabpages, toolbars, and groups. Following is the code to customize the Actions Group :

//Changing Actions Group  

C1Editor1.RibbonUI.TabPages[0].Groups[0].ToolBars[0].Items[0].Text = "SAVE";  

C1Editor1.RibbonUI.TabPages[0].Groups[0].ToolBars[0].Items[0].ToolTip= "SAVE";  

C1.Web.UI.Controls.C1ToolBar.C1ToolBarGroup redoUndoGrp = (C1.Web.UI.Controls.C1ToolBar.C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Action].ToolBars[C1EditorConst.Toolbar_Edit].Items[0];  

redoUndoGrp.Items[0].ToolTip = "REDO";  

redoUndoGrp.Items[1].ToolTip = "UNDO";  

C1.Web.UI.Controls.C1ToolBar.C1ToolBarGroup prevPrintGrp = (C1.Web.UI.Controls.C1ToolBar.C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Action].ToolBars[C1EditorConst.Toolbar_Edit].Items[1];  

prevPrintGrp.Items[0].ToolTip = "PREVIEW";  

prevPrintGrp.Items[1].ToolTip = "PRINT";  

C1.Web.UI.Controls.C1ToolBar.C1ToolBarGroup cutCopyGrp = (C1.Web.UI.Controls.C1ToolBar.C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Action].ToolBars[C1EditorConst.Toolbar_Edit].Items[2];  

cutCopyGrp.Items[0].ToolTip = "CUT";  

cutCopyGrp.Items[1].ToolTip = "COPY";  

cutCopyGrp.Items[2].ToolTip = "PASTE";  

cutCopyGrp.Items[3].ToolTip = "SELECT THEM ALL";

After the Actions group we have Font Group. This group consists of following toolbar controls:

  1. Font Name DropDownList
  2. Font Size DropDownList
  3. Background/Font Color Group
  4. BlackToSupGroup Group
  5. TemplateGroup Group
  6. RemoveFormatGroup Group

Following is the code to customize the Font Group :

//change font style dropdown text and tooltip  

C1ToolBarDropDownList fontNameGrp = (C1.Web.UI.Controls.C1ToolBar.C1ToolBarDropDownList)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Font].ToolBars[C1EditorConst.Toolbar_Font].Items[0];  

fontNameGrp.Text = "FONT ";  

fontNameGrp.ToolTip = "FONT NAME";  

//change font size dropdown text and tooltip  

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Font].ToolBars[C1EditorConst.Toolbar_Font].Items[1].ToolTip = "FONT SIZE";  

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Font].ToolBars[C1EditorConst.Toolbar_Font].Items[1].Text = "FONT SIZE";  

//change color  

C1ToolBarGroup colorGrp = (C1.Web.UI.Controls.C1ToolBar.C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Font].ToolBars[C1EditorConst.Toolbar_Font].Items[2];  

colorGrp.Items[0].ToolTip = "BACKCOLOR";  

colorGrp.Items[1].ToolTip = "FONTCOLOR";  

//font style  

C1ToolBarGroup fontStyleGrp = (C1.Web.UI.Controls.C1ToolBar.C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Font].ToolBars[C1EditorConst.Toolbar_Font].Items[3];  

fontStyleGrp.Items[0].ToolTip = "BOLD";  

fontStyleGrp.Items[1].ToolTip = "ITALIC";  

fontStyleGrp.Items[2].ToolTip = "UNDERLINE";  

fontStyleGrp.Items[3].ToolTip = "STRIKETHROUGH";  

fontStyleGrp.Items[4].ToolTip = "SUBSCRIPT";  

fontStyleGrp.Items[5].ToolTip = "SUPERSCRIPT";  

C1ToolBarGroup formatGrp = (C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Font].ToolBars[C1EditorConst.Toolbar_Font].Items[4];  

formatGrp.Items[0].ToolTip = "FORMAT";  

C1ToolBarGroup remFormatGrp = (C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Font].ToolBars[C1EditorConst.Toolbar_Font].Items[5];  

remFormatGrp.Items[0].ToolTip = "REMOVE FORMAT"; 

Third group in Format tabpage is Paragraph group. Paragraph group has following toolbar controls :

  1. Paragraph Justify Group
  2. Border Group
  3. Ordered/Unordered List Group
  4. Block Out/In Group

Following is the code to customize the Paragraph group :

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Paragraph].ToolBars[C1EditorConst.Toolbar_Paragraph].Items[0].ToolTip = "ALIGNMENT";  

C1ToolBarGroup alignGrp = (C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Paragraph].ToolBars[C1EditorConst.Toolbar_Paragraph].Items[0];  

alignGrp.Items[0].ToolTip = "ALIGN LEFT";  

alignGrp.Items[1].ToolTip = "CENTER";  

alignGrp.Items[2].ToolTip = "ALIGN RIGHT";  

alignGrp.Items[3].ToolTip = "JUSTIFY";  

C1ToolBarGroup borderGrp = (C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Paragraph].ToolBars[C1EditorConst.Toolbar_Paragraph].Items[1];  

borderGrp.Items[0].ToolTip = "BORDER";  

C1ToolBarGroup bulletGrp= (C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Paragraph].ToolBars[C1EditorConst.Toolbar_Paragraph].Items[2];  

bulletGrp.Items[0].ToolTip = "NUMBER LIST";  

bulletGrp.Items[1].ToolTip = "BULLET LIST";  

C1ToolBarGroup indentGrp  = (C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Paragraph].ToolBars[C1EditorConst.Toolbar_Paragraph].Items[3];  

indentGrp.Items[0].ToolTip = "DECREASE INDENT";  

indentGrp.Items[1].ToolTip = "INCREASE INDENT";

The last group of Format tab is Review group. This group has following toolbar controls :

  1. Spelling Button
  2. Inspect Button
  3. Find Button

Following is the code to customize the Review group :

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Review].ToolBars[0].Items[0].Text = "SPELL";  

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Review].ToolBars[0].Items[0].ToolTip = "SPELLING";  

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Review].ToolBars[1].Items[0].Text = "INSPEC";  

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Review].ToolBars[1].Items[0].ToolTip= "INSPECT";  

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Review].ToolBars[1].Items[1].Text = "FIND";  

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Format].Groups[C1EditorConst.Group\_Review].ToolBars[1].Items[1].ToolTip = "FIND";

Insert TabPage Customization

The next tabpage that we will customize is “Insert” tab. The Insert tabpage has following Groups :

  1. Tables
  2. Breaks
  3. Forms
  4. Special

Tables Group has following toolbar controls :

  1. Table SplitButton
  2. Tables Edit Group
  3. Cell Split Merge Group
  4. Cell Split Merge Group

Following is the code for customization of Tables Group :

//Changing Tables Group  

C1ToolBarSplitButton splBtn = (C1ToolBarSplitButton)C1Editor1.RibbonUI.TabPages[1].Groups[0].ToolBars[0].Items[0];  

splBtn.Text = "TABLES";  

splBtn.ToolTip = "TABLES";  

splBtn.Items[0].Text = "INSERT TABLE";  

splBtn.Items[0].ToolTip = "INSERT TABLE";  

splBtn.Items[1].Text = "EDIT";  

splBtn.Items[1].ToolTip = "EDIT TABLE";  

C1ToolBarGroup tableEditGrp = (C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[1].Groups[0].ToolBars[1].Items[0];  

tableEditGrp.Items[0].ToolTip = "INSERT COLUMNS";  

tableEditGrp.Items[1].ToolTip = "INSERT ROWS";  

tableEditGrp.Items[2].ToolTip = "INSERT CELLS";  

C1ToolBarGroup cellSplitGrp= (C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[1].Groups[0].ToolBars[1].Items[1];  

cellSplitGrp.Items[0].ToolTip = "SPLIT CELL";  

cellSplitGrp.Items[1].ToolTip = "MERGE CELL";  

C1ToolBarGroup tableDelGrp = (C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[1].Groups[0].ToolBars[1].Items[2];  

tableDelGrp.Items[0].ToolTip = "DELETE COLUMNS";  

tableDelGrp.Items[1].ToolTip = "DELETE ROWS";  

tableDelGrp.Items[2].ToolTip = "DELETE CELLS";

The second group Breaks has the four toolbar buttons to insert page break, paragraph, print page break and horizontal lines. We would only set the tooltips of these buttons as :

//Changing Breaks Group  

C1Editor1.RibbonUI.TabPages[1].Groups[1].ToolBars[0].Items[0].ToolTip = "INSERT BREAK";  

C1Editor1.RibbonUI.TabPages[1].Groups[1].ToolBars[0].Items[1].ToolTip = "INSERT PARAGRAPH";  

C1Editor1.RibbonUI.TabPages[1].Groups[1].ToolBars[0].Items[2].ToolTip = "INSERT PRINT PAGE BREAK";  

C1Editor1.RibbonUI.TabPages[1].Groups[1].ToolBars[0].Items[3].ToolTip = "INSERT HORIZONTAL LINE";

The next group is Forms group. This group contains the following controls :

  1. Forms Group
  2. Text Form Inputs Group
  3. Image/Button Group
  4. Listbox, DropDownList, Radio, Checkbox Group

This group inserts different html controls in the html page. We would need the following code for the customization of this group :

//Changing Forms Group  

C1ToolBarGroup frmGroup = (C1.Web.UI.Controls.C1ToolBar.C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Insert].Groups[C1EditorConst.Group\_Forms].ToolBars[C1EditorConst.Toolbar_Forms].Items[0];  

frmGroup.Items[0].ToolTip = "FORM";  

C1ToolBarGroup textFormGrp= (C1.Web.UI.Controls.C1ToolBar.C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Insert].Groups[C1EditorConst.Group\_Forms].ToolBars[C1EditorConst.Toolbar_Forms].Items[1];  

textFormGrp.Items[0].ToolTip = "TEXTAREA";  

textFormGrp.Items[1].ToolTip = "TEXTBOX";  

textFormGrp.Items[2].ToolTip = "PASSWORD FIELD";  

textFormGrp.Items[3].ToolTip = "HIDDEN FIELD";  

C1ToolBarGroup imageBtnGrp = (C1.Web.UI.Controls.C1ToolBar.C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Insert].Groups[C1EditorConst.Group\_Forms].ToolBars[0].Items[2];  

imageBtnGrp.Items[0].ToolTip = "IMAGE BUTTON";  

imageBtnGrp.Items[1].ToolTip = "BUTTON";  

C1ToolBarGroup ctrlGrp = (C1.Web.UI.Controls.C1ToolBar.C1ToolBarGroup)C1Editor1.RibbonUI.TabPages[1].Groups[2].ToolBars[0].Items[3];  

ctrlGrp.Items[0].ToolTip = "LISTBOX";  

ctrlGrp.Items[1].ToolTip = "DROPDOWNLIST";  

ctrlGrp.Items[2].ToolTip = "RADIOBUTTON";  

ctrlGrp.Items[3].ToolTip = "CHECKBOX";

The group that we would customize is Special group. This is a special group because this groups helps us in inserting links, images, videos, special characters and datetime fields. Following code is used to customize this group :

//Changing Special Group  

C1Editor1.RibbonUI.TabPages[1].Groups[3].ToolBars[0].Items[0].Text = "LINK";  

C1Editor1.RibbonUI.TabPages[1].Groups[3].ToolBars[0].Items[0].ToolTip = "LINK";  

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Insert].Groups[C1EditorConst.Group\_Special].ToolBars[C1EditorConst.Toolbar_Special].Items[0].ToolTip = "IMAGE BROWSER";  

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Insert].Groups[C1EditorConst.Group\_Special].ToolBars[C1EditorConst.Toolbar_Special].Items[1].ToolTip = "MEDIA";  

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Insert].Groups[C1EditorConst.Group\_Special].ToolBars[C1EditorConst.Toolbar_Special].Items[2].ToolTip = "INSERT SPECIAL CHARACTER";  

C1Editor1.RibbonUI.TabPages[C1EditorConst.Page\_Insert].Groups[C1EditorConst.Group\_Special].ToolBars[C1EditorConst.Toolbar_Special].Items[3].ToolTip = "INSERT DATE TIME";

Removing Toolbar Items

While customizing the toolbar, you might want to remove toolbar controls, groups or even tabs. Two methods are given to remove any item – Remove() and RemoveAt(). These methods can be used with tabpages, groups or controls. 1. Use Remove method : You can either use the tab name or index to remove the tabpage. You can use any one of the following lines of code to remove, say Insert tab : a. C1Editor1.RibbonUI.TabPages.Remove(C1EditorConst.Page_Insert); b. C1Editor1.RibbonUI.TabPages.Remove("Insert"); **2. Use RemoveAt method : You can remove any toolbar item using indexes. Following code of line is used to remove Format** tab :

C1Editor1.RibbonUI.TabPages.RemoveAt(0);

Download Sample

MESCIUS inc.

comments powered by Disqus