[Solved] Different toolbars for full screen mode

[thepilsbury]

Is it possible to have a different set of toolbars shown when the user toggles between normal and full screen mode. I would like to have a minimal set of tools showing initially and when the use toggles to full screen mode to show a full set.

[Rumen]

Hi Darren,

You can find attached the requested example. The solution is a little bit tricky: there are two editors with different toolbars on the page and each one is placed in different DIV element. The first DIV is visible and the second one is hidden. When pressing the ToggleScreenMode button of the first editor, the DIV of the visible editor is hidden and the second DIV became visible. The content from the first editor is transmitted to the second one, which is now in full screen mode.

When we press the ToggleScreenMode button of the second editor, we make its DIV element again invisible and show the first hidden DIV. The content from the second editor in transmitted to the first editor too.

<div id="editorContainer1">
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting1">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Bold" />
            <telerik:EditorTool Name="Italic" />
            <telerik:EditorTool Name="Underline" />
            <telerik:EditorTool Name="togglescreenmode" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>
</div>
<div id="editorContainer2" style="display:none;">
<telerik:RadEditor runat="server" ID="RadEditor2" OnClientCommandExecuting="OnClientCommandExecuting2">
     <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Cut" />
            <telerik:EditorTool Name="Copy" />
            <telerik:EditorTool Name="Paste" />
            <telerik:EditorTool Name="togglescreenmode" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>
</div>

<script type="text/javascript">
var div1 = document.getElementById("editorContainer1");
var div2 = document.getElementById("editorContainer2");
var editor1;
var editor2;
var toHide = false;
var content;

Sys.Application.add_load(function()
  {
     editor1 = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object
     editor2 = $find("<%=RadEditor2.ClientID%>");
  }
);

function OnClientCommandExecuting1(editor, args)
{
   var commandName = args.get_commandName();  
   if(commandName == "ToggleScreenMode")
   {
       div1.style.display = "none";
       div2.style.display = "";
       toHide = false;
       editor2.fire("ToggleScreenMode");
       content = editor1.get_Html(true);
       editor2.set_Html(content);
       args.set_cancel(true);
    
   }
  
  
}
function OnClientCommandExecuting2(editor, args)
{
    var commandName = args.get_commandName();  
    if(commandName == "ToggleScreenMode")
    {
        if (toHide == true)
        {
            div2.style.display = "none";
            div1.style.display = "";
            content = editor2.get_Html(true);
            editor1.set_Html(content);
            //editor1.fire("ToggleScreenMode");
        }                  
   
       toHide = true;
     
    }
   
}
</script>


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center