New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Using ToolsFile.xml

This article shows how you can configure and fine-tune the RadEditor tools by using an XML file:

ToolsFile XML structure
Adding Tools
Configuring Various Tools

ToosFile XML structure

The ToolsFile must have a valid XML structure as shown below:

XML

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

Adding Tools

Tools Collection — <tools> and <headertools>

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.

Tools Element - `<tools>`

Attributes for the <tools> element.

Attribute	Description
context *	Configures the contextual behavior of a Tab (Phone Layout Toolbar Configuration).
name	This string will identify the toolbar. This is the rendered name of the tool group when a RibbonBar is used.
tab *	This string will set a name to the Tab in the ToolZone (Phone Layout Toolbar Configuration and RibbonBar ToolbarMode).

∗ These attributes are related to Phone Layout configuration and are applicable only with Mobile rendering.

Tool Element - `<tool>`

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.

>caption Example 1: Adding a plain Bold tool to the toolgroup.

XML

<tools>
	<tool name="Bold" />
</tools>

>caption Example 2: Assigning a keyboard shortcut for the Bold tool.

XML

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

>caption Example 3: Adding header tools.

XML

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

Configuring Various Tools

Modules

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

XML

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

Links

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

XML

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

Symbols

Attributes for the <symbol> element.

Attribute	Description
value (required)	The symbol to be displayed

Example 6: Configuring Symbols

XML

 <symbols>
   <symbol value="\u20AC" />
 </symbols>

Fonts

Attributes for the <font> element.

Attribute	Description
name (required)	Font Name

Example 7: Configuring Fonts

XML

<fontNames>    
    <item name="Arial" />     
</fontNames>

CssClasses collection

Attributes for the <class> element.

Attribute	Description
name (required)	Class Alias
value (required)	Class Name

Example 8: Configuring CssClasses collection

XML

<classes>    
    <class name="Clear Class" value="" />    
    <class name="Links Class" value="a.link" />
</classes>

Paragraphs

Attributes for the <paragraph> element.

Attribute	Description
name (required)	Paragraph Alias
value (required)	Paragraph Name

Example 9: Configuring Paragraphs

XML

<paragraphs>
	<paragraph name="Normal" value="<p>" />
	<paragraph name="<H1>Heading 1</H1>" value="<H1>" />
</paragraphs>

Colors

Attributes for the <color> element.

Attribute	Description
value (required)	Hex value of the color

Example 10: Configuring Colors

XML

<colors>    
	<color value="#FF00EE" />     
</colors>

Snippets

Attributes for the <snippet> element.

Attribute	Description
name (required)	Snippet Alias

Example 11: Configuring Snippets

XML

<snippets>     
    <snippet name="Signature">      
        <![CDATA[         
            <strong>John Smith</strong>
            <br>Sales Manager<br>         
            ...         
            ************************************************      
         //]]>  
    </snippet>
</snippets>

Languages

Attributes for the <language> element.

Attribute	Description
code (required)	Language code
title (required)	Language Title

Example 12: Configuring Languages

XML

<languages>
  <langauge code="en-US" title="English" />
  <langauge code="fr-FR" title="French" />
</languages>

Context Menus

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

XML

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

ASP.NET

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