New to Telerik UI for ASP.NET AJAX? Download 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:

ToosFile XML structure

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.

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.

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.

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

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

Symbols

Attributes for the <symbol> element.

Attribute Description
value (required) The symbol to be displayed

Example 6: Configuring Symbols

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

Fonts

Attributes for the <font> element.

Attribute Description
name (required) Font Name

Example 7: Configuring Fonts

<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

<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

<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

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

Languages

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>

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

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

See Also

In this article