This is a migrated thread and some comments may be shown as answers.

Position of the Edit Modes buttons

3 Answers 11 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 08 Sep 2019, 03:43 AM

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

3 Answers, 1 is accepted

Sort by
0
Jon
Top achievements
Rank 1
answered on 09 Sep 2019, 05:17 AM

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>
0
Rumen
Telerik team
answered on 09 Sep 2019, 07:33 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jon
Top achievements
Rank 1
answered on 09 Sep 2019, 07:41 AM

Thank you very much Rumen,

Great super fast support as always !

Jon

Tags
Editor
Asked by
Jon
Top achievements
Rank 1
Answers by
Jon
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or