It is very easy to customize the layout of the toolbars in RichTextEditor. You can add or remove buttons, and change their placement. Beyond this, you may also add your own tools to the toolbar, create your own toolbars, or create custom icons for your toolbar!

Loading Predefined Toolbar

RichTextEditor provides several predefined toolbars that are useful for certain tasks. You can simply specify the name of a toolbar using Editor.Toolbar property. The toolbars are defined in the configuration file (richtexteditor\scripts\config.js). Inside the configuration file you can create as many toolbar definitions as you need.

You can customize toolbars by adding, rearranging or removing buttons. For example, if you have a button you don't use in a toolbar, remove it.

<RTE:Editor id="Editor1" Toolbar="Full" runat="server"></RTE:Editor>
Editor1.Toolbar = "full"

Setting Toolbar Items Directly

RichTextEditor allows you set the toolbar definition in-page. You can assign a custom set of toolbar items using Editor.ToolbarItems property.


<RTE:Editor id="Editor1" ToolbarItems="bold,italic" runat="server"></RTE:Editor>


Editor1.ToolbarItems = "bold,italic";


Editor1.ToolbarItems = "bold,italic"

Toolbar groups

Your toolbar layout may contain many toolbar buttons instead of small selection of buttons. So you need to put the buttons into different toolbar groups. The final toolbar layout is composed of a series of "toolbar groups". The group items move together on new rows when resizing the editor.

You can use the following methods to create toolbar groups.

Editor1.ToolbarItems = {bold, italic}
Editor1.ToolbarItems = [bold, italic]
Editor1.ToolbarItems = (bold, italic)

Toolbar Separator

Within Toolbar groups, you can add toolbar separators between a group of toolbar buttons.

You can use the "|" string to create separators.

Editor1.ToolbarItems = {bold, italic | Cut,Copy,Paste}
Editor1.ToolbarItems = [bold, italic | Cut,Copy,Paste]
Editor1.ToolbarItems = (bold, italic | Cut,Copy,Paste)

Toolbar Row Break

You can split toolbar layout by inserting a toolbar row break. The toolbar row break can be used to tell the editor that you want to force the Toolbar groups to be rendered in a new row and not following the previous one.

You can use the "-","_" or "/" string to create toolbar row breaks.

Editor1.ToolbarItems = {bold, italic | Cut,Copy,Paste}-{Indent, Outdent | Superscript,Subscript}
Editor1.ToolbarItems = [bold, italic | Cut,Copy,Paste]_[Indent, Outdent | Superscript,Subscript]
Editor1.ToolbarItems = (bold, italic | Cut,Copy,Paste)/(Indent, Outdent | Superscript,Subscript)

Disabling toolbar items individually

RichTextEditor allows you disable individual toolbar icons using Editor.DisabledItems property.


<RTE:Editor id="Editor1" DisabledItems="save, help" runat="server"></RTE:Editor>


Editor1.DisabledItems = "save, help";


Editor1.DisabledItems = "save, help"

Send feedback about this topic to CuteSoft. © 2003 - 2018 CuteSoft Components Inc. All rights reserved.