The RadEditor Toolbar position can be changed by using the DockingZone attribute which can have the following values:
- Left
- Right
- Top
- Bottom
- Module
- The id of an external html element
If an external element is used, it must have the following CSS classes applied: RadEditor, reCustomContainer, <RadEditor Skin>. Here is an example with the Default skin:
<div id="outerdiv" class="RadEditor reCustomContainer Default">
</div>
You can obtain the skin name dynamically from the RadEditor object through its get_skin() JavaScript method, as shown in this demo.
Here are a few examples of setting a custom toolbar position:
- In the RadEditor declaration:
<telerik:RadEditor ID="RadEditor1" runat="server">
<Tools>
<telerik:EditorToolGroup DockingZone="Left">
<telerik:EditorTool Name="AjaxSpellCheck" />
. . . .
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
- In the ToolsFile:
<tools enabled="true" DockingZone="Bottom">
<tool name="Bold" />
. . . .
</tools>
- In the code behind:
EditorToolGroup toolgroupLeft = newEditorToolGroup();
toolgroupLeft.Attributes["DockingZone"] = "Left";
editor.Tools.Add(toolgroupLeft);
toolgroupLeft.Tools.Add(newEditorTool("Bold"));