Position of the Edit Modes buttons

4 posts, 0 answers
  1. Jack
    Jack avatar
    143 posts
    Member since:
    May 2003

    Posted 07 Sep 2019 Link to this post

    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

  2.
  3. Jack
    Jack avatar
    143 posts
    Member since:
    May 2003

    Posted 09 Sep 2019 Link to this post

    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>
  5. Rumen
    Admin
    Rumen avatar
    14275 posts

    Posted 09 Sep 2019 Link to this post

    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.
  7. Jack
    Jack avatar
    143 posts
    Member since:
    May 2003

    Posted 09 Sep 2019 Link to this post

    Thank you very much Rumen,

    Great super fast support as always !

    Jon

  8.
Back to Top