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 RadEditor—Phone 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
Icon | Tool Name | Description | ToolsFile Declaration |
---|---|---|---|
ConvertToUpper | Convert the text of the current selection to upper case, preserving the non-text elements such as images and tables. | <tool name="ConvertToUpper" /> | |
ConvertToLower | Convert the text of the current selection to lower case, preserving the non-text elements such as images and tables. | <tool name="ConvertToLower" /> | |
RealFontSize | Allows 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"/> | |
ToggleScreenMode | Toggle Screen Mode - Switches Telerik RadEditor into full screen mode. | <tool name="ToggleScreenMode" shortcut="F11 / CMD+F11"/> | |
ToggleTableBorder | Show/Hide Border - Shows or hides borders around tables in the content area. | <tool name="ToggleTableBorder" /> | |
Zoom | Zoom - Changes the level of text magnification. | <tool name="Zoom" /> | |
ModuleManager | Module Manager - Activates /Deactivates modules from a drop-down list of available modules. | <tool name="ModuleManager" /> | |
ToggleDocking | Toggle Docking - Docks all floating toolbars to their respective docking areas. | <tool name="ToggleDocking" /> | |
FindAndReplace | Find and Replace - Find (and replaces) text in the editor's content area. | <tool name="FindAndReplace" shortcut="CTRL+F / CMD+F"/> | |
Print - Prints the contents of the Telerik RadEditor or the whole web page. | <tool name="Print" shortcut="CTRL+P / CMD+P"/> | ||
AjaxSpellCheck | Spell - Launches the spell checker. | <tool name="AjaxSpellCheck"/> | |
Cut | Cut - Cuts the selected content and copies it to the clipboard. | <tool name="Cut" shortcut="CTRL+X / CMD+X"/> | |
Copy | Copy - Copies the selected content to the clipboard. | <tool name="Copy" shortcut="CTRL+C / CMD+X"/> | |
Paste | Paste - Pastes the copied content from the clipboard into the editor. | <tool name="Paste" shortcut="CTRL+V / CMD+V"/> | |
PasteStrip | PasteStrip dropdown - Contains advanced paste options (Paste, PasteFromWord, PasteFromWordNoFontsNoSizes, PastePlainText, PasteAsHtml, PasteHtml) | <tool name="PasteStrip" /> | |
PasteFromWord | Paste from Word - Pastes content copied from Word and removes the web-unfriendly tags. | <tool name="PasteFromWord" /> | |
PasteFromWordNoFontsNoSizes | Paste from Word cleaning fonts and sizes - Cleans all Word-specific tags and removes font names and text sizes. | <tool name="PasteFromWordNoFontsNoSizes" /> | |
PastePlainText | Paste Plain Text - Pastes plain text (no formatting) into the editor. | <tool name="PastePlainText" /> | |
PasteHtml | Paste 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" /> | |
PasteAsHtml | Paste as HTML - Pastes HTML code in the content area and keeps all the HTML tags. | <tool name="PasteAsHtml"/> | |
Undo | Undo - Undoes the last action. | <tool name="Undo" shortcut="CTRL+Z / CMD+Z"/> | |
Redo | Redo - Redoes/repeats the last action, which has been undone. | <tool name="Redo" shortcut="CTRL+Y / CMD+Y"/> | |
FormatStripper | Format Stripper - Removes custom or all formatting from selected text. | <tool name="FormatStripper"/> | |
Help | Quick Help - Launches the Quick Help you are currently viewing. | <tool name="Help" shortcut="F1"/> | |
AboutDialog | About Dialog - Shows the current version and credentials of Telerik RadEditor . | <tool name="AboutDialog" /> | |
XhtmlValidator | XhtmlValidator - Uses the W3C XHTML Validator Page to perform validation of the current editor content. | <tool name="XhtmlValidator" /> | |
StyleBuilder | StyleBuilder - 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" /> |
Insert and Manage Links, Tables, Special Characters, Images and Media
Icon | Tool Name | Description | ToolsFile Declaration |
---|---|---|---|
ImageManager | Image Manager - Inserts an image from a predefined image folder(s). | <tool name="ImageManager" shortcut="CTRL+G / CMD+G"/> | |
InsertImage | Insert Image - A lite version of the Set Image Properties (Properties...) dialog. | <tool name="InsertImage"/> | |
ImageMapDialog | Image Map - Allows users to define clickable areas within an image. | <tool name="ImageMapDialog"/> | |
AbsolutePosition | Absolute Object Position - Sets an absolute position of an object (free move). | <tool name="AbsolutePosition" /> | |
InsertTable | Insert Table - Inserts a table in the Telerik RadEditor . | <tool name="InsertTable" /> | |
ToggleTableBorder | Toggle Table Borders - Toggles borders of all tables within the editor. | <tool name="ToggleTableBorder" /> | |
InsertSnippet | Insert Snippet - Inserts pre-defined code snippets. | <tool name="InsertSnippet" /> | |
InsertFormElement | Insert Form Element - Inserts a form element from a drop-down list with available elements. | <tool name="InsertFormElement" /> | |
InsertDate | Insert Date - Inserts current date. | <tool name="InsertDate" /> | |
InsertTime | Insert Time - Inserts current time. | <tool name="InsertTime" /> | |
InsertExternalVideo | Insert Video - Inserts YouTube or Vimeo video providing just the URL. Additional options for video customization are available as well. | <tool name="InsertExternalVideo" /> | |
FlashManager | Flash Manager - Inserts a Flash animation and lets you set its properties. | <tool name="FlashManager" /> | |
MediaManager | Windows Media Manager - Inserts a Windows media object (AVI, MPEG, WAV, etc.) and lets you set its properties. | <tool name="MediaManager" /> | |
DocumentManager | Document Manager - Inserts a link to a document on the server (PDF, DOC, etc.) | <tool name="DocumentManager" /> | |
LinkManager | Hyperlink Manager - Makes the selected text or image a hyperlink. | <tool name="LinkManager" shortcut="CTRL+K / CMD+K"/> | |
InsertLink | Insert Link - A lite version of the Hyperlink Manager , which makes the selected text or image a hyperlink. | <tool name="InsertLink" /> | |
Unlink | Remove Hyperlink - Removes the hyperlink from the selected text or image. | <tool name="Unlink" shortcut="CTRL+SHIFT+K / CMD+SHIFT+K"/> | |
InsertSymbol | Insert Special Character - Inserts a special character (€, ®, ©, ±, etc.) | <tool name="InsertSymbol" /> | |
InsertCustomLink | Insert Custom Link - Inserts an internal or external link from a predefined list. | <tool name="InsertCustomLink" shortcut="CTRL+ALT+K / CMD+ALT+K"/> | |
TemplateManager | Choose HTML Template - Applies an HTML template from a predefined list of templates. | <tool name="TemplateManager" /> |
Create, Format, Edit: Paragraphs and Lines
Icon | Tool Name | Description | ToolsFile Declaration |
---|---|---|---|
InsertParagraph | Insert New Paragraph - Inserts a new paragraph. | <tool name="InsertParagraph" /> | |
FormatBlock | Paragraph Style dropdown button - Applies standard text styles to selected text. | <tool name="FormatBlock"/> | |
Indent | Indent - Indents paragraphs to the right. | <tool name="Indent" /> | |
Outdent | Outdent - Indents paragraphs to the left. | <tool name="Outdent" /> | |
JustifyLeft | Align Left - Aligns the selected paragraph to the left. | <tool name="JustifyLeft" /> | |
JustifyCenter | Center - Aligns the selected paragraph to the center. | <tool name="JustifyCenter" /> | |
JustifyRight | Align Right - Aligns the selected paragraph to the right. | <tool name="JustifyRight" /> | |
JustifyFull | Justify - Justifies the selected paragraph. | <tool name="JustifyFull" /> | |
JustifyNone | Justify None - Removes the alignment. | <tool name="JustifyNone" /> | |
InsertUnorderedList | Bulleted List - Creates a bulleted list from the selection. | <tool name="InsertUnorderedList" /> | |
InsertOrderedList | Numbered List - Creates a numbered list from the selection. | <tool name="InsertOrderedList" /> | |
InsertHorizontalRule | Insert Horizontal Line (e.g. Horizontal Ruler) - Inserts a horizontal line at the cursor position. | <tool name="InsertHorizontalRule" /> |
Create, Format, Edit: Text, Font and Lists
Icon | Tool Name | Description | ToolsFile Declaration |
---|---|---|---|
Bold | Bold - Applies bold formatting to the selected text. | <tool name="Bold" shortcut="CTRL+B / CMD+B"/> | |
Italic | Italic - Applies italic formatting to the selected text. | <tool name="Italic" shortcut="CTRL+I / CMD+I"/> | |
Underline | Underline - Applies underline formatting to the selected text. | <tool name="Underline" shortcut="CTRL+U / CMD+U"/> | |
StrikeThrough | Strikethrough - Applies strikethrough formatting to the selected text. | <tool name="StrikeThrough" /> | |
Superscript | Superscript - Makes the selected text superscript. | <tool name="Superscript" /> | |
Subscript | Subscript - Makes the selected text subscript. | <tool name="Subscript" /> | |
FontName | Font Select - Sets the font typeface. | <tool name="FontName" shortcut="CTRL+SHIFT+F / CMD+SHIFT+F"/> | |
FontSize | Font Size - Sets the font size. | <tool name="FontSize"/> | |
ForeColor | Text Color (foreground) - Changes the foreground color of the selected text. | <tool name="ForeColor"/> | |
BackColor | Text Color (background) - Changes the background color of the selected text. | <tool name="BackColor"/> | |
FormatCodeBlock | Formats the selected text as a code block. | <tool name="FormatCodeBlock" /> | |
ApplyClass | Custom Styles - Applies custom, predefined styles to the selected text. | <tool name="ApplyClass"/> | |
EditorSeparator | Separate 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
Icon | Tool Name | Description | ToolsFile Declaration |
---|---|---|---|
AcceptTrackChange | AcceptTrackChange - Accepts the selected change. | <tool name="AcceptTrackChange" /> | |
RejectTrackChange | RejectTrackChange - Rejects the selected change. | <tool name="RejectTrackChange" /> | |
AcceptAllTrackChanges | AcceptAllTrackChanges - Accepts all changes in the document. | <tool name="AcceptAllTrackChanges" /> | |
RejectAllTrackChanges | RejectAllTrackChanges - Rejects all changes in the document. | <tool name="RejectAllTrackChanges" /> | |
EnableTrackChangesOverride | EnableTrackChangesOverride - Toggles the Track Changes feature. | <tool name="EnableTrackChangesOverride" /> | |
AddComment | AddComment - Adds comment on the highlighted text. | <tool name="AddComment" /> | |
RemoveComment | RemoveComment - Removes the comment under the selected text. | <tool name="RemoveComment"/> | |
RemoveAllComments | RemoveAllComments - Removes all comments in the document. | <tool name="RemoveAllComments"/> |
ToolsFile Example
Below is an example of a ToolsFile:
<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
<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>