New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Toolbars Overview

RadEditor Toolbars are containers that accommodate the buttons and dropdown lists of the various tools. Developers can group buttons in a number of toolbars according to the specific purpose of the RadEditor implementation. The figure below shows an editor with its full set of tools, distributed in five toolbars. You can configure a toolbar with as few or as many tools as your application requires.

You can learn how to add standard or custom tools to a toolbar in the following Help articles:

You can also configure the toolbar using an XML ToolsFile, which defines:

  • the number of toolbars and system modules

  • the collection of buttons in each toolbar and their order

  • the specific options (if any) for the respective tools (i.e., Fonts collections, Colors collection, etc.)

  • the dockability of each toolbar

  • the default docking zone for each toolbar

You can group tools with similar logic in ToolStrips. You can find more information in the following article: How to create a ToolStrip.

As of Q2 2015, new phone-optimized UI is introduced in RadEditorPhone Layout of RadEditor. You can find more details about the toolbar-related optimizations in the Phone Layout Elements Structure article.

RadEditor Toolset Reference

The lists below show the icon image, the name of the tool, a description of what the tool does, and the tag format used to declare that tool in the ToolsFile.xml file.

General Buttons

IconTool NameDescriptionToolsFile Declaration
ConvertToUpperConvert the text of the current selection to upper case, preserving the non-text elements such as images and tables.<tool name="ConvertToUpper" />
ConvertToLowerConvert the text of the current selection to lower case, preserving the non-text elements such as images and tables.<tool name="ConvertToLower" />
RealFontSizeAllows the user to apply to the current selection, the font size measured in pixels (px) or points (pt), rather than a fixed-size 1 to 7 (as does the FontSize tool).<tool name="RealFontSize" shortcut="CTRL+SHIFT+P / CMD+SHIFT+P"/>
ToggleScreenModeToggle Screen Mode - Switches Telerik RadEditor into full screen mode.<tool name="ToggleScreenMode" shortcut="F11 / CMD+F11"/>
ToggleTableBorderShow/Hide Border - Shows or hides borders around tables in the content area.<tool name="ToggleTableBorder" />
ZoomZoom - Changes the level of text magnification.<tool name="Zoom" />
ModuleManagerModule Manager - Activates /Deactivates modules from a drop-down list of available modules.<tool name="ModuleManager" />
ToggleDockingToggle Docking - Docks all floating toolbars to their respective docking areas.<tool name="ToggleDocking" />
FindAndReplaceFind and Replace - Find (and replaces) text in the editor's content area.<tool name="FindAndReplace" shortcut="CTRL+F / CMD+F"/>
PrintPrint - Prints the contents of the Telerik RadEditor or the whole web page.<tool name="Print" shortcut="CTRL+P / CMD+P"/>
AjaxSpellCheckSpell - Launches the spell checker.<tool name="AjaxSpellCheck"/>
CutCut - Cuts the selected content and copies it to the clipboard.<tool name="Cut" shortcut="CTRL+X / CMD+X"/>
CopyCopy - Copies the selected content to the clipboard.<tool name="Copy" shortcut="CTRL+C / CMD+X"/>
PastePaste - Pastes the copied content from the clipboard into the editor.<tool name="Paste" shortcut="CTRL+V / CMD+V"/>
editor-paste-stripPasteStripPasteStrip dropdown - Contains advanced paste options (Paste, PasteFromWord, PasteFromWordNoFontsNoSizes, PastePlainText, PasteAsHtml, PasteHtml)<tool name="PasteStrip" />
PasteFromWordPaste from Word - Pastes content copied from Word and removes the web-unfriendly tags.<tool name="PasteFromWord" />
PasteFromWordNoFontsNoSizesPaste from Word cleaning fonts and sizes - Cleans all Word-specific tags and removes font names and text sizes.<tool name="PasteFromWordNoFontsNoSizes" />
PastePlainTextPaste Plain Text - Pastes plain text (no formatting) into the editor.<tool name="PastePlainText" />
PasteHtmlPaste HTML - Pastes HTML code in to the current selection and renders it. It is helpful when needed to enter predefined HTML code such as media embed source.<tool name="PasteHtml" />
PasteAsHtmlPaste as HTML - Pastes HTML code in the content area and keeps all the HTML tags.<tool name="PasteAsHtml"/>
UndoUndo - Undoes the last action.<tool name="Undo" shortcut="CTRL+Z / CMD+Z"/>
RedoRedo - Redoes/repeats the last action, which has been undone.<tool name="Redo" shortcut="CTRL+Y / CMD+Y"/>
FormatStripperFormat Stripper - Removes custom or all formatting from selected text.<tool name="FormatStripper"/>
HelpQuick Help - Launches the Quick Help you are currently viewing.<tool name="Help" shortcut="F1"/>
AboutDialogAbout Dialog - Shows the current version and credentials of Telerik RadEditor .<tool name="AboutDialog" />
XhtmlValidatorXhtmlValidator - Uses the W3C XHTML Validator Page to perform validation of the current editor content.<tool name="XhtmlValidator" />
StyleBuilderStyleBuilderStyleBuilder - Provides options to define cascading style sheet (CSS) style attributes.<tool name="StyleBuilder" />
Toggle ToolZone (this button is Phone-Layout-related)Toggles the ToolZone in RadEditor with Phone Layout<tool name="MobileEdit" />
Toggle Edit Mode (this button is Phone-Layout-related)Switches between Design and HTML mode in RadEditor with Phone Layout.<tool name="ToggleEditMode" />
Toggle Screen Mode (this button is Phone-Layout-related)Exits the full screen mode in RadEditor with Phone layout.<tool name="ToggleScreenMode" />
IconTool NameDescriptionToolsFile Declaration
ImageManagerImage Manager - Inserts an image from a predefined image folder(s).<tool name="ImageManager" shortcut="CTRL+G / CMD+G"/>
InsertImageInsert Image - A lite version of the Set Image Properties (Properties...) dialog.<tool name="InsertImage"/>
ImageMapDialogImage Map - Allows users to define clickable areas within an image.<tool name="ImageMapDialog"/>
AbsolutePositionAbsolute Object Position - Sets an absolute position of an object (free move).<tool name="AbsolutePosition" />
InsertTableInsert Table - Inserts a table in the Telerik RadEditor .<tool name="InsertTable" />
ToggleTableBorderToggle Table Borders - Toggles borders of all tables within the editor.<tool name="ToggleTableBorder" />
InsertSnippetInsert Snippet - Inserts pre-defined code snippets.<tool name="InsertSnippet" />
InsertFormElementInsert Form Element - Inserts a form element from a drop-down list with available elements.<tool name="InsertFormElement" />
InsertDateInsert Date - Inserts current date.<tool name="InsertDate" />
InsertTimeInsert Time - Inserts current time.<tool name="InsertTime" />
editor-insertexternalvideoInsertExternalVideoInsert Video - Inserts YouTube or Vimeo video providing just the URL. Additional options for video customization are available as well.<tool name="InsertExternalVideo" />
FlashManagerFlash Manager - Inserts a Flash animation and lets you set its properties.<tool name="FlashManager" />
MediaManagerWindows Media Manager - Inserts a Windows media object (AVI, MPEG, WAV, etc.) and lets you set its properties.<tool name="MediaManager" />
DocumentManagerDocument Manager - Inserts a link to a document on the server (PDF, DOC, etc.)<tool name="DocumentManager" />
LinkManagerHyperlink Manager - Makes the selected text or image a hyperlink.<tool name="LinkManager" shortcut="CTRL+K / CMD+K"/>
InsertLinkInsert Link - A lite version of the Hyperlink Manager , which makes the selected text or image a hyperlink.<tool name="InsertLink" />
UnlinkRemove Hyperlink - Removes the hyperlink from the selected text or image.<tool name="Unlink" shortcut="CTRL+SHIFT+K / CMD+SHIFT+K"/>
InsertSymbolInsert Special Character - Inserts a special character (€, ®, ©, ±, etc.)<tool name="InsertSymbol" />
InsertCustomLinkInsert Custom Link - Inserts an internal or external link from a predefined list.<tool name="InsertCustomLink" shortcut="CTRL+ALT+K / CMD+ALT+K"/>
TemplateManagerChoose HTML Template - Applies an HTML template from a predefined list of templates.<tool name="TemplateManager" />

Create, Format, Edit: Paragraphs and Lines

IconTool NameDescriptionToolsFile Declaration
InsertParagraphInsert New Paragraph - Inserts a new paragraph.<tool name="InsertParagraph" />
FormatBlockParagraph Style dropdown button - Applies standard text styles to selected text.<tool name="FormatBlock"/>
IndentIndent - Indents paragraphs to the right.<tool name="Indent" />
OutdentOutdent - Indents paragraphs to the left.<tool name="Outdent" />
JustifyLeftAlign Left - Aligns the selected paragraph to the left.<tool name="JustifyLeft" />
JustifyCenterCenter - Aligns the selected paragraph to the center.<tool name="JustifyCenter" />
JustifyRightAlign Right - Aligns the selected paragraph to the right.<tool name="JustifyRight" />
JustifyFullJustify - Justifies the selected paragraph.<tool name="JustifyFull" />
JustifyNoneJustify None - Removes the alignment.<tool name="JustifyNone" />
InsertUnorderedListBulleted List - Creates a bulleted list from the selection.<tool name="InsertUnorderedList" />
InsertOrderedListNumbered List - Creates a numbered list from the selection.<tool name="InsertOrderedList" />
InsertHorizontalRuleInsert Horizontal Line (e.g. Horizontal Ruler) - Inserts a horizontal line at the cursor position.<tool name="InsertHorizontalRule" />

Create, Format, Edit: Text, Font and Lists

 

IconTool NameDescriptionToolsFile Declaration
BoldBold - Applies bold formatting to the selected text.<tool name="Bold" shortcut="CTRL+B / CMD+B"/>
ItalicItalic - Applies italic formatting to the selected text.<tool name="Italic" shortcut="CTRL+I / CMD+I"/>
UnderlineUnderline - Applies underline formatting to the selected text.<tool name="Underline" shortcut="CTRL+U / CMD+U"/>
StrikeThroughStrikethrough - Applies strikethrough formatting to the selected text.<tool name="StrikeThrough" />
SuperscriptSuperscript - Makes the selected text superscript.<tool name="Superscript" />
SubscriptSubscript - Makes the selected text subscript.<tool name="Subscript" />
FontNameFont Select - Sets the font typeface.<tool name="FontName" shortcut="CTRL+SHIFT+F / CMD+SHIFT+F"/>
FontSizeFont Size - Sets the font size.<tool name="FontSize"/>
ForeColorText Color (foreground) - Changes the foreground color of the selected text.<tool name="ForeColor"/>
BackColorText Color (background) - Changes the background color of the selected text.<tool name="BackColor"/>
radeditor formatcodeblock pngFormatCodeBlockFormats the selected text as a code block.<tool name="FormatCodeBlock" />
ApplyClassCustom Styles - Applies custom, predefined styles to the selected text.<tool name="ApplyClass"/>
EditorSeparatorSeparate the tools icons on the toolbar.<tool separator="true" />

Track Changes and Comments

To have the Track Changes tools you should set the EnableTrackChanges property to true. You can refer to Track Changes article. And for Comment tools, set the EnableComments property to true. You can refer to Comments article

IconTool NameDescriptionToolsFile Declaration
AcceptTrackChangeAcceptTrackChange - Accepts the selected change.<tool name="AcceptTrackChange" />
RejectTrackChangeRejectTrackChange - Rejects the selected change.<tool name="RejectTrackChange" />
AcceptAllTrackChangesAcceptAllTrackChanges - Accepts all changes in the document.<tool name="AcceptAllTrackChanges" />
RejectAllTrackChangesRejectAllTrackChanges - Rejects all changes in the document.<tool name="RejectAllTrackChanges" />
EnableTrackChangesOverrideEnableTrackChangesOverride - Toggles the Track Changes feature.<tool name="EnableTrackChangesOverride" />
AddCommentAddComment - Adds comment on the highlighted text.<tool name="AddComment" />
RemoveCommentRemoveComment - Removes the comment under the selected text.<tool name="RemoveComment"/>
RemoveAllCommentsRemoveAllComments - Removes all comments in the document.<tool name="RemoveAllComments"/>

ToolsFile Example

Below is an example of a ToolsFile:

XML
<root>
	<tools name="MainToolbar" enabled="true">
		<tool name="AjaxSpellCheck" />
		<tool name="Print" />
		<tool name="FindAndReplace" />
		<tool separator="true"/>
		<tool name="Cut" />
		<tool name="Copy" />
		<tool name="Paste" />
		<tool name="PasteFromWord" />
		<tool name="PastePlainText" />
		<tool name="PasteAsHtml"  />
		<tool separator="true"/>
		<tool name="Undo" />
		<tool name="Redo" />
	</tools>
</root> 			

Full Set of Tools Setup

ASP.NET
        <telerik:RadEditor ID="RadEditor1" runat="server">
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="XhtmlValidator" />
                    <telerik:EditorTool Name="PageProperties" />
                    <telerik:EditorTool Name="StyleBuilder" />
                    <telerik:EditorTool Name="TrackChangesDialog" />
                    <telerik:EditorTool Name="FormatCodeBlock" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="InsertImage" />
                    <telerik:EditorTool Name="InsertLink" />
                    <telerik:EditorTool Name="InsertTableLight" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="InsertFormElement" />
                    <telerik:EditorTool Name="InsertFormForm" />
                    <telerik:EditorTool Name="InsertFormButton" />
                    <telerik:EditorTool Name="InsertFormCheckbox" />
                    <telerik:EditorTool Name="InsertFormHidden" />
                    <telerik:EditorTool Name="InsertFormPassword" />
                    <telerik:EditorTool Name="InsertFormRadio" />
                    <telerik:EditorTool Name="InsertFormReset" />
                    <telerik:EditorTool Name="InsertFormSelect" />
                    <telerik:EditorTool Name="InsertFormSubmit" />
                    <telerik:EditorTool Name="InsertFormTextarea" />
                    <telerik:EditorTool Name="InsertFormText" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="StripAll" />
                    <telerik:EditorTool Name="StripCss" />
                    <telerik:EditorTool Name="StripFont" />
                    <telerik:EditorTool Name="StripSpan" />
                    <telerik:EditorTool Name="StripWord" />
                    <telerik:EditorTool Name="FormatStripper" />
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="AjaxSpellCheck" />
                    <telerik:EditorTool Name="ImageManager" ShortCut="CTRL+M" />
                    <telerik:EditorTool Name="SetImageProperties" />
                    <telerik:EditorTool Name="ImageMapDialog" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="FlashManager" />
                    <telerik:EditorTool Name="MediaManager" />
                    <telerik:EditorTool Name="InsertExternalVideo" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="DocumentManager" />
                    <telerik:EditorTool Name="TemplateManager" />
                    <telerik:EditorTool Name="SilverlightManager" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="InsertTable" />
                    <telerik:EditorTool Name="InsertRowAbove" />
                    <telerik:EditorTool Name="InsertRowBelow" />
                    <telerik:EditorTool Name="DeleteRow" />
                    <telerik:EditorTool Name="InsertColumnLeft" />
                    <telerik:EditorTool Name="InsertColumnRight" />
                    <telerik:EditorTool Name="DeleteColumn" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="MergeColumns" />
                    <telerik:EditorTool Name="MergeRows" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="SplitCell" />
                    <telerik:EditorTool Name="SplitCellHorizontal" />
                    <telerik:EditorTool Name="DeleteCell" />
                    <telerik:EditorTool Name="SetCellProperties" />
                    <telerik:EditorTool Name="SetTableProperties" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="InsertSymbol" />
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="Undo" />
                    <telerik:EditorTool Name="Redo" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="Cut" />
                    <telerik:EditorTool Name="Copy" />
                    <telerik:EditorTool Name="Paste" ShortCut="CTRL+!" />
                    <telerik:EditorTool Name="PasteMarkdown" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="PasteFromWord" />
                    <telerik:EditorTool Name="PasteFromWordNoFontsNoSizes" />
                    <telerik:EditorTool Name="PastePlainText" />
                    <telerik:EditorTool Name="PasteAsHtml" />
                    <telerik:EditorTool Name="PasteHtml" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="Print" />
                    <telerik:EditorTool Name="FindAndReplace" />
                    <telerik:EditorTool Name="SelectAll" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="InsertGroupbox" />
                    <telerik:EditorTool Name="InsertParagraph" />
                    <telerik:EditorTool Name="InsertHorizontalRule" />
                    <telerik:EditorTool Name="InsertSnippet" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="InsertDate" />
                    <telerik:EditorTool Name="InsertTime" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="AboutDialog" />
                    <telerik:EditorTool Name="Help" />
                    <telerik:EditorTool Name="ToggleScreenMode" />
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="Bold" />
                    <telerik:EditorTool Name="Italic" />
                    <telerik:EditorTool Name="Underline" />
                    <telerik:EditorTool Name="StrikeThrough" />
                    <telerik:EditorTool Name="ForeColor" />
                    <telerik:EditorTool Name="BackColor" />
                    <telerik:EditorTool Name="FormatPainter" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="JustifyLeft" />
                    <telerik:EditorTool Name="JustifyCenter" />
                    <telerik:EditorTool Name="JustifyRight" />
                    <telerik:EditorTool Name="JustifyFull" />
                    <telerik:EditorTool Name="JustifyNone" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="Superscript" />
                    <telerik:EditorTool Name="Subscript" />
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="ConvertToLower" />
                    <telerik:EditorTool Name="ConvertToUpper" />
                    <telerik:EditorTool Name="Indent" />
                    <telerik:EditorTool Name="Outdent" />
                    <telerik:EditorTool Name="InsertOrderedList" />
                    <telerik:EditorTool Name="InsertUnorderedList" />
                    <telerik:EditorTool Name="AbsolutePosition" />
                    <telerik:EditorTool Name="LinkManager" />
                    <telerik:EditorTool Name="Unlink" />
                    <telerik:EditorTool Name="SetLinkProperties" />
                    <telerik:EditorTool Name="ToggleTableBorder" />
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="FontName" />
                    <telerik:EditorTool Name="FontSize" />
                    <telerik:EditorTool Name="RealFontSize" />
                    <telerik:EditorTool Name="ApplyClass" />
                    <telerik:EditorTool Name="InsertCustomLink" />
                    <telerik:EditorTool Name="FormatBlock" />
                    <telerik:EditorTool Name="FormatSets" />
                    <telerik:EditorTool Name="Zoom" />
                </telerik:EditorToolGroup>
            </Tools>
        </telerik:RadEditor>

See Also