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

[Solved] RadEditor Open Advanced Editor From RadWindow

3 Answers 129 Views

Editor

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

Seth asked on 29 Jan 2010, 02:27 PM

I am trying to do something similiar to your demo for an advanced editor.

http://demos.telerik.com/aspnet-ajax/editor/examples/editorinradwindow/defaultcs.aspx

Where mine differs is that my editor is already contained in a RadWindow. It functions, but the problem is that the advanced editor window needs to be larger than the window it was called from. I followed another thread/demo I found that shows how to call a window using the parent window and the window opens up, but now the content does not get passed back and forth because the client events no longer fire. I have attached my client side code for your review.

Main Editor:

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="MessageManagement.aspx.vb" Inherits="MessageManagement" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>Message Management</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <div> 
        
                    <telerik:RadScriptManager ID="rsmMessageManagement" runat="server">  
        
                    </telerik:RadScriptManager>    
        
                    <script type="text/javascript">  
        
                        //<![CDATA[ 
        
                        var editorContent = null; 
        
                        Telerik.Web.UI.Editor.CommandList["RichEditor"] = function(commandName, editor, args) { 
        
                            editorContent = editor.get_html(true); //get RadEditor content 
        
                            openRadWindow("DialogWindow", "MessageEditorAdvanced.aspx"); 
        
                        }; 
        
                        function GetRadWindow() { 
        
                            var oWindow = null; 
        
                            if (window.radWindow) 
        
                                oWindow = window.radWindow; 
        
                            else if (window.frameElement.radWindow) 
        
                                oWindow = window.frameElement.radWindow; 
        
                            return oWindow; 
        
                        } 
        
                        function openRadWindow(windowName, url) { 
        
                            var parentWindow = GetRadWindow().get_windowManager(); 
        
                            var oWindow = parentWindow.open(url, windowName); 
        
                            oWindow.setSize(700, 550); 
        
                            oWindow.center(); 
        
                            oWindow.show(); 
        
                        } 
        
                        function SetEditorContent(content) { 
        
                            //set content to RadEditor on the mane page from RadWindow 
        
                            $find("<%= reMessage.ClientID %>").set_html(content); 
        
                        } 
        
                        function SetDialogContent(oWnd) { 
        
                            var contentWindow = oWnd.get_contentFrame().contentWindow; 
        
                            if (contentWindow && contentWindow.setContent) { 
        
                                window.setTimeout(function() { 
        
                                    //pass and set the content from the mane page to RadEditor in RadWindow 
        
                                    contentWindow.setContent(editorContent); 
        
                                }, 500); 
        
                            } 
        
                        } 
        
                        //]]> 
        
                    </script> 
        
                    <telerik:RadEditor ID="reMessage" runat="server" 
        
                        EnableResize="false" 
        
                        Width="100%" 
        
                        Height="200px">  
        
                        <Tools> 
        
                            <telerik:EditorToolGroup> 
        
                                <telerik:EditorTool Name="RichEditor" Text="Open Advanced Editor" /> 
        
                                <telerik:EditorTool Name="Bold" /> 
        
                                <telerik:EditorTool Name="Italic" /> 
        
                                <telerik:EditorTool Name="Underline" /> 
        
                                <telerik:EditorTool Name="Cut" /> 
        
                                <telerik:EditorTool Name="Copy" /> 
        
                                <telerik:EditorTool Name="Paste" /> 
        
                                <telerik:EditorTool Name="FontName" /> 
        
                                <telerik:EditorTool Name="RealFontSize" /> 
        
                            </telerik:EditorToolGroup> 
        
                        </Tools> 
        
                        <Content> 
        
                        </Content> 
        
                    </telerik:RadEditor> 
        
                    <telerik:RadWindow OnClientShow="SetDialogContent" OnClientPageLoad="SetDialogContent" 
        
                        NavigateUrl="MessageEditorAdvanced.aspx" runat="server" Behaviors="Maximize,Close,Move" 
        
                        ID="DialogWindow" VisibleStatusbar="false" Width="800px" Modal="true" Height="700px" /> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Advanced Editor:

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="MessageEditorAdvanced.aspx.vb" Inherits="MessageEditorAdvanced" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>Advanced Message Editor</title> 
        
                    <style type="text/css">  
        
                    html, form, body  
        
                    {  
        
                        height: 100%;  
        
                        margin: 0px;  
        
                    }  
        
                    #editor1Bottom UL  
        
                    {  
        
                        float:right !important;  
        
                    }  
        
                    </style> 
        
            </head> 
        
            <body style="margin:0px;" scroll="no">  
        
                <form id="form1" runat="server">  
        
                <div> 
        
                    <telerik:RadScriptManager ID="rsmMessageManagement" runat="server">  
        
                    </telerik:RadScriptManager>    
        
                    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">  
        
                    </telerik:RadStyleSheetManager> 
        
                    <script type="text/javascript">  
        
                        //<![CDATA[ 
        
                        function GetRadWindow() 
        
                        { 
        
                              var oWindow = null; 
        
                              if (window.radWindow) oWindow = window.radWindow; 
        
                              else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; 
        
                              return oWindow; 
        
                        } 
        
                        function setContent(content) { 
        
                            var editor = $find("<%= reMessage.ClientID %>"); 
        
                            if (editor) editor.set_html(content); //set content from the parent page to RadEditor in RadWindow 
        
                        } 
        
                        function OnClientLoad(editor)             
        
                        { 
        
                            var editor = $find("<%= reMessage.ClientID %>"); 
        
                            editor.fire("ToggleScreenMode"); //set RadEditor in Full Scree mode 
        
                        } 
        
                        function OnClientCommandExecuting(editor, args) { 
        
                            var commandName = args.get_commandName(); //returns the executed command 
        
                            if (commandName == "SaveAndClose") { 
        
                                var radWindow = GetRadWindow(); 
        
                                radWindow.close(); 
        
                                args.set_cancel(true); 
        
                            } 
        
                        } 
        
                        //]]> 
        
                    </script> 
        
                    <telerik:RadEditor ID="reMessage" runat="server" 
        
                        EnableResize="false" 
        
                        OnClientLoad="OnClientLoad" 
        
                        OnClientCommandExecuting="OnClientCommandExecuting" 
        
                        ToolsFile="~/Shared/XmlLibraries/MessageEditorTools.xml">  
        
                        <Content> 
        
                        </Content> 
        
                    </telerik:RadEditor> 
        
                </div> 
        
                <telerik:RadAjaxManager runat="server">  
        
                </telerik:RadAjaxManager> 
        
                </form> 
        
            </body> 
        
            </html>

Seth

3 Answers, 1 is accepted

answered on 03 Feb 2010, 05:11 PM

editorinwindow.zip

Hi Seth,

By default, the SaveAndClose built-in command does not have any functionality, it is used just to set an icon to the custom button. In order to pass the data when this command is executed you need to add the functionality manually, e.g.:

function OnClientCommandExecuting(editor, args)

{

var commandName = args.get_commandName(); //returns the executed command

if (commandName == "SaveAndClose")

{

var radWindow = GetRadWindow(); // Find this window

var parentWindow = radWindow.BrowserWindow; // parent window object (not RadWindow);

var editor = $find("<%= reMessage.ClientID %>");

parentWindow.SetEditorContent(editor.get_html());

args.set_cancel(true);

radWindow.close();

}

For your convenience I have attached a sample project.

Sincerely,
Dobromir
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

answered on 04 Feb 2010, 08:03 PM

Thank you for your response. While your demo does work, you missed an important detail. I am trying to open the Advanced Editor window with the main browser window as the parent. I am doing this because my main editor window is only about 400 by 300 and also limits the advanced editor window to the size of my main editor window. I would like to use the entire available real estate available by the main browser window if the user so chooses.

Please look at the difference between my openRadWindow function and the one provided by your demo. What appears to be happening is that because I am calling the parentWindow.open function instead of the show function, the show events on the window are not firing.

Any suggestions?

answered on 09 Feb 2010, 03:38 PM

editorinwindow.zip

Hi Seth,

I have implemented a solution that meets your requirements the second window to be dragable outside of the first RadWindow. You can find it attached to this thread.

I hope this helps.

All the best,
Fiko
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.