Position of the Edit Modes buttons

[Jon]

Hi,

I've got my students using the editor as a full page HTML website maker.
I have 2 edit modes - design & html

All is good but I wondered if it was possible to have the edit modes in the toolbar at the top as well as at the bottom.
I can create a custom tool but not sure of the commands for design and html.

+ Is it possible to have the edit modes floating?

Thanks guys,

Jon

[Jon]

Hi again,

I've done it - pasted below if anyone else needs.
But do you know how I can get rid of the close button (X) on the floating toolbar please?

J

<telerik:RadEditor id="RadWebPage"  Runat="server" Width="100%" Skin="Metro"     Editable="True"
DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"  ToolsFile="~/xml/ToolsFileWebs.xml"  ToolbarMode="Floating" ToolsWidth="190px"  EditModes="Design, HTML" AutoResizeHeight="true"
 OnClientLoad="OnClientLoad" OnClientModeChange="OnClientModeChange"   NewLineMode="Br" StripFormattingOptions="All"  ContentFilters="None"   >

<DocumentManager SearchPatterns="*.css, *.doc, *.docx, *.pdf, *.xls, *.xlsx, *.csv, *.txt, *.js, *.xlm" />
<TemplateManager SearchPatterns="*.html, *.txt" />

<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="ChangeModeHTML" Text="HTML"   ShortCut="CTRL + SHIFT + H / CMD + H"  ShowIcon="false" ShowText="true"/>
<telerik:EditorTool Name="ChangeModeDESIGN" Text="DESIGN"  ShortCut="CTRL + SHIFT + D / CMD + D" ShowIcon="false" ShowText="true"  />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>

    <script type="text/javascript">
        Telerik.Web.UI.Editor.CommandList["ChangeModeHTML"] = function(commandName, editor, args) {
            editor.set_mode(2);
        };
         Telerik.Web.UI.Editor.CommandList["ChangeModeDESIGN"] = function(commandName, editor, args) {
            editor.set_mode(1);
        };

        //Below is needed to activate the design switch in html mode
            function OnClientModeChange(editor, args)
   {
       var mode = editor.get_mode();
       switch (mode)
       {
           case 2:
               setTimeout(function()
               {
                   var tool = editor.getToolByName("ChangeModeDESIGN");
                   tool.setState(0);
               }, 0);
           break;
       }
   }

    </script>

[Rumen]

Hi Jon,

I am glad that you've managed to create custom buttons for moving the View buttons to the toolbar and using the set_mode client method to change the view mode.

As to the new question: You can hide the X close button of RadWindow based Floating toolbar via the following CSS class:

<style>
    .rwCloseButton {
        display: none !important;
    }
</style>
<telerik:RadEditor id="RadEditor1" runat="server" ToolbarMode="Floating"></telerik:RadEditor>

or 

<style>
    .rwCommandButton.rwCloseButton {
        display: none;
    }
</style>
<telerik:RadEditor id="RadEditor1" runat="server" ToolbarMode="Floating"></telerik:RadEditor>

Regards,
Rumen
Progress Telerik

[Jon]

Thank you very much Rumen,

Great super fast support as always !

Jon