Toolbar Overview

Many functions of RichTextEditor are accessible via the toolbars, context menus (accessible through a right-click menu in the content area). This section contains reference documentation for all of the toolbars customization.

Most toolbar configuration settings have been moved to the configuration file (richtexteditor\scripts\config.js). These configurations are applied using Toolbar property. Each configuration setting defines the set of available tools, their layout, and specific options.

Default Toolbar Setting

Copy Code
toolbars: { "ribbon":"<@COMMON,ribbonpaste,pastetext,pasteword,{save,new,print,spellcheck}{cut,copy,delete,find}{undo,redo\|formatpainter}> <@FORMAT,[fontname,fontsize]{bold,italic,underlinemenu\|forecolor,backcolor}{superscript,subscript,changecase\|removeformat,cleancode,selectall}> <@PARAGRAPHS,[paragraphs,styles]{justifymenu,lineheight,ltr,rtl,insertlinemenu}{insertorderedlist,insertunorderedlist,outdent,indent,insertblockquote}> <@INSERT,ribbontable,insertgallery,insertimage,{insertform,insertbox,insertlayer,insertfieldset,fullscreen,toggleborder,pageproperties,help} {insertlink,unlink,insertanchor,insertimagemap,insertdate,insertchars,virtualkeyboard} {inserttemplate,insertdocument,insertmedia,syntaxhighlighter,insertyoutube,html5,googlemap}>", "full":"{save,new,print,find,spellcheck}{cut,copy,paste,pastetext,pasteword,delete}{undo,redo}{formatpainter}{inserttable,insertbox,insertlayer,insertfieldset} {insertform}{insertchars,syntaxhighlighter,virtualkeyboard,insertdate}{pageproperties,help}/ {bold,italic,underlinemenu,justifymenu,forecolor,backcolor}{lineheight,ltr,rtl}{insertlinemenu}{superscript,subscript,changecase} {insertorderedlist,insertunorderedlist,outdent,indent,insertblockquote}{removeformat,cleancode}{fullscreen,toggleborder,selectall}/ [paragraphs,styles][fontname,fontsize]{insertlink,unlink,insertanchor,insertimagemap} {insertgallery,insertimage,insertmedia,inserttemplate,insertdocument,insertyoutube,html5,googlemap}", "lite":"{cut,copy,paste,pastetext,pasteword,delete}{undo,redo}{spellcheck,find}{formatpainter}{insertlink,unlink}{insertlinemenu}{inserttable,insertbox} {insertgallery,insertimage,insertdocument,insertmedia,insertyoutube,inserttemplate}{removeformat,cleancode}{fullscreen,toggleborder,selectall}{help}/ [paragraphs,styles][fontname,fontsize]{bold,italic,underlinemenu}{forecolor,backcolor}{superscript,subscript,changecase} {justifymenu,insertorderedlist,insertunorderedlist,outdent,indent,insertblockquote}", "forum": "{bold,italic,underline}{forecolor,backcolor,fontname,fontsize}{justifymenu}{insertorderedlist,insertunorderedlist,outdent,indent} {insertlink,insertgallery,insertimage,insertblockquote,syntaxhighlighter}{unlink,removeformat}", "email": "{bold,italic,underline,fontname,fontsize,forecolor,backcolor}{insertlink,unlink,insertorderedlist,insertunorderedlist} {outdent,indent,insertblockquote,justifyleft,justifycenter,justifyright,removeformat}", "minimal": "{bold,italic,underline,justifyleft,justifycenter,justifyright,justifyfull,justifynone}", "none":"" }

Copy Code

toolbars:	
{
  "ribbon":"<@COMMON,ribbonpaste,pastetext,pasteword,{save,new,print,spellcheck}{cut,copy,delete,find}{undo,redo|formatpainter}>
          <@FORMAT,[fontname,fontsize]{bold,italic,underlinemenu|forecolor,backcolor}{superscript,subscript,changecase|removeformat,cleancode,selectall}>
          <@PARAGRAPHS,[paragraphs,styles]{justifymenu,lineheight,ltr,rtl,insertlinemenu}{insertorderedlist,insertunorderedlist,outdent,indent,insertblockquote}>
          <@INSERT,ribbontable,insertgallery,insertimage,{insertform,insertbox,insertlayer,insertfieldset,fullscreen,toggleborder,pageproperties,help}
          {insertlink,unlink,insertanchor,insertimagemap,insertdate,insertchars,virtualkeyboard}
          {inserttemplate,insertdocument,insertmedia,syntaxhighlighter,insertyoutube,html5,googlemap}>",
  "full":"{save,new,print,find,spellcheck}{cut,copy,paste,pastetext,pasteword,delete}{undo,redo}{formatpainter}{inserttable,insertbox,insertlayer,insertfieldset}
          {insertform}{insertchars,syntaxhighlighter,virtualkeyboard,insertdate}{pageproperties,help}/
          {bold,italic,underlinemenu,justifymenu,forecolor,backcolor}{lineheight,ltr,rtl}{insertlinemenu}{superscript,subscript,changecase}
          {insertorderedlist,insertunorderedlist,outdent,indent,insertblockquote}{removeformat,cleancode}{fullscreen,toggleborder,selectall}/
          [paragraphs,styles][fontname,fontsize]{insertlink,unlink,insertanchor,insertimagemap}
          {insertgallery,insertimage,insertmedia,inserttemplate,insertdocument,insertyoutube,html5,googlemap}",
  "lite":"{cut,copy,paste,pastetext,pasteword,delete}{undo,redo}{spellcheck,find}{formatpainter}{insertlink,unlink}{insertlinemenu}{inserttable,insertbox}
          {insertgallery,insertimage,insertdocument,insertmedia,insertyoutube,inserttemplate}{removeformat,cleancode}{fullscreen,toggleborder,selectall}{help}/
          [paragraphs,styles][fontname,fontsize]{bold,italic,underlinemenu}{forecolor,backcolor}{superscript,subscript,changecase}
          {justifymenu,insertorderedlist,insertunorderedlist,outdent,indent,insertblockquote}",
  "forum": "{bold,italic,underline}{forecolor,backcolor,fontname,fontsize}{justifymenu}{insertorderedlist,insertunorderedlist,outdent,indent}
          {insertlink,insertgallery,insertimage,insertblockquote,syntaxhighlighter}{unlink,removeformat}",
  "email": "{bold,italic,underline,fontname,fontsize,forecolor,backcolor}{insertlink,unlink,insertorderedlist,insertunorderedlist}
          {outdent,indent,insertblockquote,justifyleft,justifycenter,justifyright,removeformat}",
  "minimal": "{bold,italic,underline,justifyleft,justifycenter,justifyright,justifyfull,justifynone}",
  "none":""
}

Note that in the code above seven toolbar definitions have been defined. The first one is named ribbon and the second one is full. You can use Editor.Toolbar property to apply toolbar definition.

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.

{bold, italic}

[bold, italic]

(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.

{bold, italic | Cut,Copy,Paste}

[bold, italic | Cut,Copy,Paste]

(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.

{bold, italic | Cut,Copy,Paste}-{Indent, Outdent | Superscript,Subscript}

[bold, italic | Cut,Copy,Paste]_[Indent, Outdent | Superscript,Subscript]

(bold, italic | Cut,Copy,Paste)/(Indent, Outdent | Superscript,Subscript)