showing/hiding tools like Telerik Forum New Thread page.

[Cuneyt]

Hi. How could we hide/show tool of editor as you do at forum new thread page.
Thank you.

[Shinu]

Hi Cuneyt,

Please have a look into the following code snippet to hide/show the RadEditor ToolBar.

ASPX:

<telerik:RadEditor ID="RadEditor1" runat="server">
</telerik:RadEditor>
<telerik:RadButton ID="RadButton1" runat="server" Text="Show tool" AutoPostBack="false"
    OnClientClicked="ShowTool">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function pageLoad() {
        var editor = $find("<%=RadEditor1.ClientID %>");
        editor._element.getElementsByClassName("reToolCell").RadEditor1Top.style.display = "none";
    }
    function ShowTool(sender, args) {
        var editor = $find("<%=RadEditor1.ClientID %>");
        editor._element.getElementsByClassName("reToolCell").RadEditor1Top.style.display = "block";
    }
</script>

Thanks,
Shinu.

[Cuneyt]

Thank you this is helpfull. but i am searching i bit different solution like custom button and command tools toggling. I found this forum post.
I think this will be solution.
Regards.
Thank you.

[Cuneyt]

Ok this is my working sample. I want to share this. This may not be perfect but  could be a starter point to someone.

<telerik:RadEditor ID="eCevap" runat="server"
                           Width="820px"
                           EditModes="Design"
                           Height="200px"
                           AutoResizeHeight="True"
                           ToolsWidth="820px"
                           Skin="Sitefinity"
                           DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"
                           ExternalDialogsPath="~/Dialogs/EditorDialogs/"
                           ContentAreaMode="Div"
                           BorderColor="White"
                           IsSkinTouch="True"
                           RenderMode="Lightweight"
                           OnClientLoad="OnClientLoad">
                           <Tools>
                               <telerik:EditorToolGroup>
                                   <telerik:EditorTool Name="AdvancedTools" Text="Show Format" ShowText="true" ShowIcon="false" />
                                   <telerik:EditorTool Name="MinTools" Text="Hide format"   ShowText="true" ShowIcon="false"/>
                               </telerik:EditorToolGroup>
                               <telerik:EditorToolGroup>
                                   <telerik:EditorTool Name="Bold" />
                                   <telerik:EditorTool Name="Italic" />
                                   <telerik:EditorTool Name="InsertLink" />
                                   <telerik:EditorTool Name="FormatCodeBlock" />
                                   <telerik:EditorTool Name="InsertOrderedList" />
                                   <telerik:EditorTool Name="InsertUnorderedList" />
                                   <telerik:EditorTool Name="InsertHorizontalRule" />
                               </telerik:EditorToolGroup>

                           </Tools>
                       </telerik:RadEditor>
                       <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                           <script type="text/javascript">

                               function OnClientLoad(editor, args) {
                                   var cevapeditor = $find("<%=eCevap.ClientID %>");
                                   cevapeditor.fire("MinTools");
                               }

                               Telerik.Web.UI.Editor.CommandList["AdvancedTools"] = function (commandName, editor, args) {

                                   var tool = editor.getToolByName("Bold");
                                   tool.set_visible(true);
                                   var tool = editor.getToolByName("Italic");
                                   tool.set_visible(true);
                                   var tool = editor.getToolByName("InsertLink");
                                   tool.set_visible(true);
                                   var tool = editor.getToolByName("FormatCodeBlock");
                                   tool.set_visible(true);
                                   var tool = editor.getToolByName("InsertOrderedList");
                                   tool.set_visible(true);
                                   var tool = editor.getToolByName("InsertUnorderedList");
                                   tool.set_visible(true);
                                   var tool = editor.getToolByName("InsertHorizontalRule");
                                   tool.set_visible(true);

                                   var tool = editor.getToolByName("MinTools");
                                   tool.set_visible(true);

                                   var tool = editor.getToolByName("AdvancedTools");
                                   tool.set_visible(false);
                               }

                               Telerik.Web.UI.Editor.CommandList["MinTools"] = function (commandName, editor, args) {

                                   var tool = editor.getToolByName("Bold");
                                   tool.set_visible(false);
                                   var tool = editor.getToolByName("Italic");
                                   tool.set_visible(false);
                                   var tool = editor.getToolByName("InsertLink");
                                   tool.set_visible(false);
                                   var tool = editor.getToolByName("FormatCodeBlock");
                                   tool.set_visible(false);
                                   var tool = editor.getToolByName("InsertOrderedList");
                                   tool.set_visible(false);
                                   var tool = editor.getToolByName("InsertUnorderedList");
                                   tool.set_visible(false);
                                   var tool = editor.getToolByName("InsertHorizontalRule");
                                   tool.set_visible(false);


                                   var tool = editor.getToolByName("MinTools");
                                   tool.set_visible(false);

                                   var tool = editor.getToolByName("AdvancedTools");
                                   tool.set_visible(true);
                               }
                           </script>
                       </telerik:RadScriptBlock>

if you have white background , tools and editor border could be deleted like below:

.RadEditor .reToolbar {
    border:none !important;
}

if you are using divmode and autoresize height you want to change height like this. Because content area is a single line at first load.
solution:

.RadEditor .reContentArea {
    min-height:200px;
}

This may useful.
Thanks.