Editor / Editor In RadWindow

Editor in RadWindow

This demo shows a common case where the editor is used in a layout with limited space (for example in forums). In such scenario you can define a custom button that will open a RadWindow dialog that contains another editor that has full set of tools, thus allowing your users to get the full functionality of the RadEditor control. Once the user insert and edit the content, it can send it back to the editor on the main page by using RadWindow's and RadEditor's client-side API.

To add the custom button to the toolbar, put the following inner <telerik:EditorTool Name="RichEditor" ..> tag inside the <Tools> and <telerik:EditorToolGroup tags:

<telerik:RadEditor ID="RadEditor1">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="RichEditor" Text="Open Advanced Editor" ShowText="true" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>

Specify an icon for the custom button:

<style type="text/css">
  .reButton_text  { width: auto !important;  }
  .reToolbar.Telerik .RichEditor {  background-image: url(Icons/Open.gif) !important; }
</style>

After that register the code that will launch the dialog and set the content from the parent page to the editor in RadWindow:

<telerik:RadWindow
                    OnClientShow ="SetDialogContent" 
                    OnClientPageLoad="SetDialogContent"
                    NavigateUrl="EditorInWindow.aspx"
                    ...
                     />
<script type="text/javascript">
var editorContent = null;

Telerik.Web.UI.Editor.CommandList["RichEditor"] = function(commandName, editor, args)
{   
    editorContent = editor.get_html(true); //get RadEditor content
    $find("<%=DialogWindow.ClientID%>").show(); //open RadWindow
};

function SetDialogContent(oWnd)
{            
    var contentWindow = oWnd.get_contentFrame().contentWindow;
    if (contentWindow && contentWindow.setContent)
    {
        window.setTimeout(function()
        {                
            contentWindow.setContent(editorContent);   //pass and set the content from the mane page to RadEditor in RadWindow
        }, 500);
    }
}
</script>

The next step is to define the setContent function inside the EditorInWindow.aspx (the page that will be loaded by RadWindow). This function sets the content from RadEditor on the parent page to the editor in RadWindow:

<script type="text/javascript">    
function setContent(content)
{
    var editor = $find("<%= editor1.ClientID %>");
    if (editor) editor.set_html(content);  //set content from the parent page to RadEditor in RadWindow
}
</script>

To load the editor in RadWindow in FullScreen mode execute this line editor.fire("ToggleScreenMode"); in the OnClientLoad event of RadEditor

<script type="text/javascript">    
function OnClientLoad(editor)            
{
    editor.fire("ToggleScreenMode"); //set RadEditor in Full Scree mode                                
}
</script>

To add a "Save and Close" button on the editor in RadWindow toolbar, put the following tag in the ToolsFile.xml file (this file is available in the demo folder)

<tool name="SaveAndClose" text="Save and Close" showtext="true"  />

Add an icon for this button:

<style type="text/css">
   html, form, body {  height: 100%;     margin: 0px; }
   .reButton_text  {  width: auto !important; }
   #editor1Bottom UL {  float:right !important;  }
   .reToolbar.Telerik .SaveAndClose {  background-image: url(Icons/Save.gif) !important; }
</style>

To close the window and supply the modified content to the editor on the main page register the OnClientCommandExecuting event and function

<script type="text/javascript">
function OnClientCommandExecuting(editor, args)
{
   var commandName = args.get_commandName();   //returns the executed command
   
   if (commandName == "SaveAndClose")
   {
       var radWindow = GetRadWindow();
       var browserWindow = radWindow.get_browserWindow();
       browserWindow.SetEditorContent(editor.get_html(true));    //set the editor content on RadWindow to the editor on the parent page
       radWindow.close(); //close RadWindow
       args.set_cancel(true); //cancel the SaveAndClose command
   } 
}
</script>
<telerik:RadEditor 
    OnClientCommandExecuting="OnClientCommandExecuting"
    OnClientLoad="OnClientLoad"
    ID="editor1" Runat="server" Skin="Telerik"
    ToolsFile="ToolsFile.xml">
</telerik:RadEditor>

to obtain and set the content register the SetEditorContent function on the main page:

<script type="text/javascript">
        function SetEditorContent(content)
        {            
           $find("<%=RadEditor1.ClientID%>").set_html(content);  //set content to RadEditor on the mane page from RadWindow
        }
</script>