This article shows how you can configure and fine-tune the RadEditor tools by using an XML file:
The ToolsFile must have a valid XML structure as shown below:
<root>
<!-- The Modules collection -->
<modules>
<!-- Adding Module instances inside -->
<module />
</modules>
<!-- The HeaderTools collection -->
<headertools>
<!-- Adding header tool instances -->
<tool />
</headertools>
<!-- Adding ToolGrpoup collections to the Tools collection -->
<tools>
<!-- Adding tool instances -->
<tool />
</tools>
<!-- The Links collection -->
<links>
<!-- Adding a link instance -->
<link>
<!-- Adding a nested link instance -->
<link />
</link>
</links>
<!-- The Snippets collection -->
<snippets>
<!-- Adding snippet instance -->
<snippet>
<!-- HTML code -->
</snippet>
</snippets>
<!-- The Symbols collection -->
<symbols>
<!-- Adding a symbol instance -->
<symbol />
</symbols>
<!-- The FontNames collection-->
<fontNames>
<!-- Adding a font instance -->
<item />
</fontNames>
<!-- The Colors colleciton -->
<colors>
<!-- Adding a color instance -->
<color />
</colors>
<!-- The CssClasses collection -->
<classes>
<!-- Adding a class instance -->
<class />
</classes>
<!-- The Paragraph collection -->
<paragraphs>
<!-- Adding a paragraph instance -->
<paragraph />
</paragraphs>
<!-- The Languages collection -->
<languages>
<!-- Adding a language instance -->
<language />
</languages>
</root>
If you are interested in RibbonBar toolbar configuration continue reading the Using RibbonBar Toolbar article.
HeaderTools collection is introduced with the release of the Phone Layout of RadEditor. It is applicable only if RadEditor is rendered in Mobile rendering.
The headertools
element has no attributes. You can see how it can be configured and populated in the Phone Layout Toolbar Configuration.
Attributes for the <tools>
element.
∗ These attributes are related to Phone Layout configuration and are applicable only with Mobile rendering.
Attributes for the <tool>
element.
Attribute |
Description |
name (required)
|
This string will identify the tool. |
imageurl |
Sets the URL to the image of the small or medium button in RibbonBar ToolbarMode in Classic RenderMode. |
imageurllarge |
Sets the URL to the image of the large button in RibbonBar ToolbarMode in Classic RenderMode. |
position * |
Applicable only when tool is added to the HeaderTools collection. Defines whether the tool to be added to the left or the right tool-group (Phone Layout Toolbar Configuration). |
shortcut |
The key combination for the specific tool: <tool name="LinkManager" shortcut="Ctrl+L" /> or <tool name="TemplateManager" shortcut="Ctrl+Shift+Alt+T" /> . You can have the editor use the Cmd key on a Mac, instead of Ctrl , by providing a keyboard shortcut to the editor with a slash. For example: <tool name="Bold" shortcut="Ctrl+B / Cmd+B" /> . When RadEditor detects it is running on a Mac, it will switch from expecting the Ctrl key to expecting the Cmd key. |
showtext |
Specifies whether to display the button name next to its icon <tool name="ImageManager" shortcut="Ctrl+G" showtext="true" />
|
showicon |
Specifies whether to display the tools icon or not. Default value is true. <tool name="ImageManager" shortcut="Ctrl+G" showicon="false" showtext="true" />
|
separator |
Indicates whether a separator should appear at the current position. Possible values are boolean true or false, but if you do not want a separator you simply should omit this property. When set to true it does not require the Name attribute to be set as well. |
size |
The size of the button. Applicable for the RibbonBar ToolbarMode. Can be small , medium or large
|
strip |
Sets the toolstip in the RibbonBar tab where the button will reside. This is a collection of buttons in the same container. |
text |
Sets the text shown in the tool button. Applicable for medium and large buttons in RibbonBar ToolbarMode. |
∗ These attributes are related to Phone Layout configuration and are applicable only with Mobile rendering.
Example 1: Adding a plain Bold tool to the toolgroup.
<tools>
<tool name="Bold" />
</tools>
Example 2: Assigning a keyboard shortcut for the Bold tool.
<tools>
<tool name="Bold" shortcut="Ctrl+B" />
</tools>
You can have the editor use the Cmd
key on a Mac, instead of Ctrl
, by providing a keyboard shortcut to the editor with a slash. For example: <tool name="Bold" shortcut="Ctrl+B / Cmd+B" />
. When RadEditor detects it is running on a Mac, it will switch from expecting the Ctrl
key to expecting the Cmd
key.
Example 3: Adding header tools.
<headertools>
<tool name="Undo"/>
<tool name="Redo"/>
<tool name="MobileEdit" Position="Right"/>
<tool name="ToggleScreenMode" Position="Right"/>
</headertools>
You can find a list of all available tools in the Toolbars Overview article.
Attributes for the <module>
element.
Attribute |
Description |
name (required)
|
The friendly name of the module. When in floating mode the name will appear in the tool's titlebar. |
enabled |
Indicates whether the Module to be enabled or not. |
visible |
(Indicates whether the module should appear in the toolbar or not. This module will be available client-side - the property defines only the visibility of the module. ) |
Example 4: Configuring Modules
<modules>
<module name="RadEditorStatistics" enabled="true" visible="true" />
<module name="RadEditorDomInspector" enabled="true" visible="true" />
<module name="RadEditorNodeInspector" enabled="true" visible="true" />
<module name="RadEditorHtmlInspector" enabled="false" visible="false" />
</modules>
Attributes for the <link>
element.
Attribute |
Description |
name (required)
|
Link/Category Name/Alias |
href |
URL of the link/category |
target |
The target window of the link |
tooltip |
The tooltip for the link |
Example 5: Configuring Links
<links>
<link name="Telerik" href="https://www.telerik.com">
<link name="Products" href="https://www.telerik.com/products" />
<link name="Purchase" href="https://www.telerik.com/purchase" />
</link>
</links>
Attributes for the <symbol>
element.
Attribute |
Description |
value (required)
|
The symbol to be displayed |
Example 6: Configuring Symbols
<symbols>
<symbol value="\u20AC" />
</symbols>
Attributes for the <font>
element.
Attribute |
Description |
name (required)
|
Font Name |
Example 7: Configuring Fonts
<fontNames>
<item name="Arial" />
</fontNames>
Attributes for the <class>
element.
Attribute |
Description |
name (required)
|
Class Alias |
value (required)
|
Class Name |
Example 8: Configuring CssClasses collection
<classes>
<class name="Clear Class" value="" />
<class name="Links Class" value="a.link" />
</classes>
Attributes for the <paragraph>
element.
Attribute |
Description |
name (required)
|
Paragraph Alias |
value (required)
|
Paragraph Name |
Example 9: Configuring Paragraphs
<paragraphs>
<paragraph name="Normal" value="<p>" />
<paragraph name="<H1>Heading 1</H1>" value="<H1>" />
</paragraphs>
Attributes for the <color>
element.
Attribute |
Description |
value (required)
|
Hex value of the color |
Example 10: Configuring Colors
<colors>
<color value="#FF00EE" />
</colors>
### Snippets
Attributes for the <snippet>
element.
Attribute |
Description |
name (required)
|
Snippet Alias |
Example 11: Configuring Snippets
<snippets>
<snippet name="Signature">
<![CDATA[
<strong>John Smith</strong>
<br>Sales Manager<br>
...
************************************************
//]]>
</snippet>
</snippets>
Attributes for the <language>
element.
Attribute |
Description |
code (required)
|
Language code |
title (required)
|
Language Title |
Example 12: Configuring Languages
<languages>
<langauge code="en-US" title="English" />
<langauge code="fr-FR" title="French" />
</languages>
The contextMenus tag in the Tools file allows you to change the default or specify custom context menus for different HTML elements.
Attributes for the <contextMenu>
element.
Attribute |
Description |
forElement (required)
|
The HTML element that will call this menu. |
enabled (required)
|
Defines if this context menu is switched. |
Example 13: Configuring Context Menus
<contextmenus>
<contextMenu forElement="A" enabled="false">
</contextMenu>
<contextMenu forElement="P">
<tool name="JustifyLeft" />
<tool name="JustifyCenter" />
<tool name="JustifyRight" />
<tool name="JustifyFull" />
</contextMenu>
</contextmenus>
By editing the editor's ToolsFile.xml file you easily customize the editor's toolbar and add or remove toolbar buttons. In case you have multiple editor's on the same page, you can provide them with different set of tools by setting ToolsFile property to point to different ToolsFile.xml files:
Example 14: Using different ToolsFile xml files with multiple RadEditor on the page.
<telerik:RadEditor RenderMode="Lightweight" ToolsFile="~/ToolsFile1.xml" ID="RadEditor2" runat="server"></telerik:RadEditor>
<telerik:RadEditor RenderMode="Lightweight" ToolsFile="~/ToolsFile2.xml" ID="RadEditor3" runat="server"></telerik:RadEditor>
<telerik:RadEditor RenderMode="Lightweight" ToolsFile="~/ToolsFile3.xml" ID="RadEditor4" runat="server"></telerik:RadEditor>