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