Phone Layout Toolbar Configuration
This article explains some basic configuration options that will enable you to rearrange the tools and tabs shown in RadEditor's ToolZone:
Configuring Header Tools
The header tools can be controlled via the HeaderTools collection of RadEditor. This collection can contain plain built-in or custom tools, by adding them as EditorHeaderTool item. The header tools are extended with an additional Position property that instructs the tool to be shown either in the left- or the right-hand side tool group. If a position is not configured, it will show in the left tool group by default.
Figure 1: Customized header tools collection. The output from Example 1, Example 2 or Example 3.
Example 1: Rearranging header tools via markup.
<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Mobile"
Width="100%" Skin="Bootstrap">
<HeaderTools>
<telerik:EditorHeaderTool Name="Undo"/>
<telerik:EditorHeaderTool Name="Redo"/>
<telerik:EditorHeaderTool Name="MobileEdit" Position="Right"/>
<telerik:EditorHeaderTool Name="ToggleScreenMode" Position="Right"/>
</HeaderTools>
</telerik:RadEditor>
Example 2: Rearranging header tools from the code behind.
<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Mobile"
Width="100%" Skin="Bootstrap">
</telerik:RadEditor>
RadEditor1.HeaderTools.Add(new EditorHeaderTool("Undo", EditorHeaderToolPosition.Left));
RadEditor1.HeaderTools.Add(new EditorHeaderTool("Redo", EditorHeaderToolPosition.Left));
RadEditor1.HeaderTools.Add(new EditorHeaderTool("MobileEdit", EditorHeaderToolPosition.Right));
RadEditor1.HeaderTools.Add(new EditorHeaderTool("ToggleScreenMode", EditorHeaderToolPosition.Right));
RadEditor1.HeaderTools.Add(New EditorHeaderTool("Undo", EditorHeaderToolPosition.Left))
RadEditor1.HeaderTools.Add(New EditorHeaderTool("Redo", EditorHeaderToolPosition.Left))
RadEditor1.HeaderTools.Add(New EditorHeaderTool("MobileEdit", EditorHeaderToolPosition.Right))
RadEditor1.HeaderTools.Add(New EditorHeaderTool("ToggleScreenMode", EditorHeaderToolPosition.Right))
Example 3: Rearranging header tools from the ToolsFile.
<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Mobile"
Width="100%" Skin="Bootstrap" ToolsFile="ToolsFile.xml">
</telerik:RadEditor>
<root>
<headertools>
<tool name="Undo"/>
<tool name="Redo"/>
<tool name="MobileEdit" Position="Right"/>
<tool name="ToggleScreenMode" Position="Right"/>
</headertools>
<tools>
...
</tools>
</root>
You can find a full list of the built-in tools in the Toolbars Overview, and a full list of the elements and attributes for the ToolsFile's xml schema in Using ToolsFile.xml.
Configuring Tabs and Tools
In Examples 2-6 you can see how you can configure the ToolZone of the Phone Layout with additional Tabs and Tools.
Figure 2: The tabs and tools generated from the code in Example 4, Example 5 or Example 6.
Example 4: Configuring Tabs and Tools via markup.
<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Mobile"
Width="100%" Skin="Bootstrap">
<Tools>
<telerik:EditorToolGroup Tab="MyHome">
<telerik:EditorTool Name="Bold" />
<telerik:EditorTool Name="Italic" />
<telerik:EditorTool Name="Underline" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup Tab="MyTab">
<telerik:EditorTool Name="JustifyLeft" />
<telerik:EditorTool Name="JustifyCenter" />
<telerik:EditorTool Name="JustifyRight" />
<telerik:EditorTool Name="JustifyFull" />
<telerik:EditorTool Name="JustifyNone" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
Example 5: Configuring Tabs and Tools from the code behind.
<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Mobile"
Width="100%" Skin="Bootstrap">
</telerik:RadEditor>
EditorToolGroup myHome = new EditorToolGroup();
myHome.Tab = "MyHome";
myHome.Tools.Add(new EditorTool("Bold"));
myHome.Tools.Add(new EditorTool("Italic"));
myHome.Tools.Add(new EditorTool("Underline"));
EditorToolGroup myTab = new EditorToolGroup();
myTab.Tab = "MyTab";
myTab.Tools.Add(new EditorTool("JustifyLeft"));
myTab.Tools.Add(new EditorTool("JustifyCenter"));
myTab.Tools.Add(new EditorTool("JustifyRight"));
myTab.Tools.Add(new EditorTool("JustifyFull"));
myTab.Tools.Add(new EditorTool("JustifyNone"));
RadEditor1.Tools.Add(myHome);
RadEditor1.Tools.Add(myTab);
Dim myHome As New EditorToolGroup()
myHome.Tab = "MyHome"
myHome.Tools.Add(New EditorTool("Bold"))
myHome.Tools.Add(New EditorTool("Italic"))
myHome.Tools.Add(New EditorTool("Underline"))
Dim myTab As New EditorToolGroup()
myTab.Tab = "MyTab"
myTab.Tools.Add(New EditorTool("JustifyLeft"))
myTab.Tools.Add(New EditorTool("JustifyCenter"))
myTab.Tools.Add(New EditorTool("JustifyRight"))
myTab.Tools.Add(New EditorTool("JustifyFull"))
myTab.Tools.Add(New EditorTool("JustifyNone"))
RadEditor1.Tools.Add(myHome)
RadEditor1.Tools.Add(myTab)
Example 6: Configuring Tabs and Tools via ToolsFile.
<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Mobile"
Width="100%" Skin="Bootstrap" ToolsFile="ToolsFile.xml">
</telerik:RadEditor>
<root>
<tools tab="MyHome">
<tool name="Bold" />
<tool name="Italic" />
<tool name="Underline" />
</tools>
<tools tab="MyTab">
<tool name="JustifyLeft" />
<tool name="JustifyCenter" />
<tool name="JustifyRight" />
<tool name="JustifyFull" />
<tool name="JustifyNone" />
</tools>
</root>
As shown, you can add tabs and tools with the same approach used for the desktop-oriented RadEditor (Add Standard Buttons). Additionally, you should define the Tab property in order to configure a title for the Tab.
You can find a full list of the built-in tools in the Toolbars Overview, and a full list of the elements and attributes for the ToolsFile's xml schema in Using ToolsFile.xml.
Configuring Contextual Tabs
Contextual tabs can be created by adding a Tab. Next, set a CSS selector value to the Context property of the EditorToolGroup. By that, when the user selects an element that fits the requirement of the given selector, the tab will be automatically selected and when the ToolZone is shown, the tools from this tab will be shown.
Figure 3: The contextual tab behavior implemented in Example 7, Example 8 or Example 9.
Example 7: Adding a contextual tab via markup.
<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Mobile"
Width="100%" Skin="Bootstrap">
<Tools>
<telerik:EditorToolGroup Tab="Home">
...
</telerik:EditorToolGroup>
<telerik:EditorToolGroup Tab="Paragraph" Context="p, div">
<telerik:EditorTool Name="FontName" />
<telerik:EditorTool Name="FontSize" />
</telerik:EditorToolGroup>
</Tools>
<Content>
<p>Paragraph with some example text</p>
</Content>
</telerik:RadEditor>
Example 8: Adding a contextual tab from the code behind.
<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Mobile"
Width="100%" Skin="Bootstrap">
<Content>
<p>Paragraph with some example text</p>
</Content>
</telerik:RadEditor>
EditorToolGroup home = new EditorToolGroup();
home.Tab = "MyHome";
// Add tools to the Home tab.
EditorToolGroup paragraphTab = new EditorToolGroup();
paragraphTab.Tab = "Paragraph";
paragraphTab.Context = "p, div";
paragraphTab.Tools.Add(new EditorTool("FontName"));
paragraphTab.Tools.Add(new EditorTool("FontSize"));
RadEditor1.Tools.Add(home);
RadEditor1.Tools.Add(paragraphTab);
Dim home As New EditorToolGroup()
home.Tab = "MyHome"
' Add tools to the Home tab.
Dim paragraphTab As New EditorToolGroup()
paragraphTab.Tab = "Paragraph"
paragraphTab.Context = "p, div"
paragraphTab.Tools.Add(New EditorTool("FontName"))
paragraphTab.Tools.Add(New EditorTool("FontSize"))
RadEditor1.Tools.Add(home)
RadEditor1.Tools.Add(paragraphTab)
Example 9: Adding a contextual tab via ToolsFile.
<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Mobile"
Width="100%" Skin="Bootstrap" ToolsFile="ToolsFile.xml">
<Content>
<p>Paragraph with some example text</p>
</Content>
</telerik:RadEditor>
<root>
<tools>
<tools tab="Home">
...
</tools>
<tools tab="Paragraph" context="p, div">
<tool name="FontName" />
<tool name="FontSize" />
</tools>
</tools>
</root>