Forums

Not answered get/set html for Sitefinity RadEditor

TLsf

Posted on Sep 26, 2008 (permalink)

Hi,

I am trying to update the contents of a Rad Editor box through javascript.

I found an example that says these two lines of code should do the trick:

var editor = GetRadEditor("<%=RadEditor1.ClientID%>");  

editor.SetHTML("test"); 

The error I get with this is object expected on the first line.

You can find below my entire aspx file. I would appreciate any help you can give me with this.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="rad_editor.aspx.cs" Inherits="rad_editor" %> 

<!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></title>  

</head> 

<script type="text/javascript">  

    function GetCampaignDescription() {  

        var editor = GetRadEditor("<%=RadEditor1.ClientID%>");  

        RadEditor1.SetHTML("test");  

    }  

</script>   

<body> 

    <form id="form1" runat="server">  

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 

        <div class="ctrlPropsGeneric">  

        <telerik:RadEditor   

            runat="server"   

            ID="RadEditor1" 

            ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css" 

            ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml" 

            OnClientLoad="GetCampaignDescription" 

            NewLineBr="False" 

            Height="360px"   

            Width="98%">   

            <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" /> 

            <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" /> 

            <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" /> 

            <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" /> 

            <CssFiles> 

                <telerik:EditorCssFile Value="~/App_Themes/Theme1/style.css" /> 

            </CssFiles> 

            <Content> 

            </Content> 

        </telerik:RadEditor> 

        <script type="text/javascript">  

        Telerik.Web.UI.Editor.CommandList["LibraryImageManager"] = function(commandName, editor, args)  

        {  

           var editoreditorArgs = editor.getSelectedElement();  

           if (!editorArgs.nodeName || typeof(editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")  

                editoreditorArgs = editor.getSelection();  

           var myCallbackFunction = function(sender, args)  

           {  

                if (typeof(editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "IMG")  

                    editor.get_Document().replaceChild(editorArgs, args);  

                else  

                {  

                    var cloned = args.cloneNode(true);  

                    var div = args.ownerDocument.createElement("DIV");  

                    div.appendChild(cloned);  

                    editorArgs.pasteHtml(div.innerHTML);  

                }  

           }  

           editor.showExternalDialog(  

           '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx") %>',  

           editorArgs,   

           750,   

           515,   

           myCallbackFunction,   

           null,   

           'ImageLibraryDialog',   

           true,   

           Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,   

           false,   

           false)  

        };  

        Telerik.Web.UI.Editor.CommandList["LibraryDocumentManager"] = function(commandName, editor, args)  

        {  

           var editoreditorArgs = editor.getSelectedElement();  

           if (!editorArgs.nodeName || typeof(editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")  

                editoreditorArgs = editor.getSelection();  

           var myCallbackFunction = function(sender, args)  

           {  

                if (typeof(editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")  

                    editor.get_Document().replaceChild(editorArgs, args);  

                else  

                {  

                    var cloned = args.cloneNode(true);  

                    var div = args.ownerDocument.createElement("DIV");  

                    div.appendChild(cloned);  

                    editorArgs.pasteHtml(div.innerHTML);  

                }  

           }  

           editor.showExternalDialog(  

           '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx") %>',  

           editorArgs,   

           750,   

           515,   

           myCallbackFunction,   

           null,   

           'ImageLibraryDialog',   

           false,   

           Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,   

           false,   

           false)  

        };  

        Telerik.Web.UI.Editor.CommandList["LinkManager"] = function(commandName, editor, args)  

        {  

           var editoreditorArgs = editor.getSelectedElement();  

           if (!editorArgs.nodeName || typeof(editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")  

                editoreditorArgs = editor.getSelection();  

           var myCallbackFunction = function(sender, args)  

           {  

                if (typeof(editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")  

                    editor.get_Document().replaceChild(editorArgs, args);  

                else  

                {  

                    var cloned = args.cloneNode(true);  

                    var div = args.ownerDocument.createElement("DIV");  

                    div.appendChild(cloned);  

                    editorArgs.pasteHtml(div.innerHTML);  

                }  

           }  

           editor.showExternalDialog(  

           '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>',  

           editorArgs,   

           750,   

           515,   

           myCallbackFunction,   

           null,   

           'ImageLibraryDialog',   

           false,   

           Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,   

           false,   

           false)  

        };  

        Telerik.Web.UI.Editor.CommandList["SetLinkProperties"] = function(commandName, editor, args)  

        {  

           var editoreditorArgs = editor.getSelectedElement();  

           if (!editorArgs.nodeName || typeof(editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")  

                editoreditorArgs = editor.getSelection();  

           var myCallbackFunction = function(sender, args)  

           {  

                if (typeof(editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")  

                    editor.get_Document().replaceChild(editorArgs, args);  

                else  

                {  

                    var cloned = args.cloneNode(true);  

                    var div = args.ownerDocument.createElement("DIV");  

                    div.appendChild(cloned);  

                    editorArgs.pasteHtml(div.innerHTML);  

                }  

           }  

           editor.showExternalDialog(  

           '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>',  

           editorArgs,   

           750,   

           515,   

           myCallbackFunction,   

           null,   

           'ImageLibraryDialog',   

           false,   

           Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,   

           false,   

           false)  

        };  

        RadEditorCommandList["IncreaseSize"] = function(commandName, editor, oTool)  

        {  

            var currentWidth = editor.GetWidth(); //get the width of Telerik RadEditor  

            var currentHeight = editor.GetHeight(); //get the heigh of Telerik RadEditor  

            editor.SetSize(currentWidth, currentHeight + 30); //set the height size of the editor to increase with 30px  

        };  

        RadEditorCommandList["DecreaseSize"] = function(commandName, editor, oTool)  

        {  

            var currentWidth = editor.GetWidth();  

            var currentHeight = editor.GetHeight();  

            editor.SetSize(currentWidth, currentHeight - 30); //set the height size of the editor to decrease with 30px  

        };  

        var oldFunction = Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"]; //save the original Paste function  

        Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"] = function(commandName, editor, args)  

        {  

            oldFunction(commandName, editor, args);  

            var bd = document.getElementsByTagName("body")[0];  

            if(/fullScreenMode/.test(bd.className)) {  

                var rep = bd.className.match(' '+'fullScreenMode')?' '+'fullScreenMode':'fullScreenMode';  

                bdbd.className=bd.className.replace(rep,'');  

            } else {  

                bd.className += bd.className?' '+'fullScreenMode':'fullScreenMode';  

            }  

        };  

        </script> 

        </div> 

    </form> 

</body> 

</html>

SelAromDotNet Master

Posted on Sep 26, 2008 (permalink)

i think that that method you've used is one that was defined by whoever posted the example. according to the telerik documentation http://www.telerik.com/help/aspnet-ajax/editor_getingreferencetoradeditor.html, you get a reference to the editor like this:

<script type="text/javascript">  

     var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object  

     alert(editor.get_id()); //returns RadEditor Client ID  

</script>

of course I'm not sure about that $find, I think that's a jQuery thing but I'm not sure if it's built into the telerik controls. might give it a try!

there's a lot of examples of the clientside API in there on that link up there that might prove helpful in some of the things you're trying to accomplish.

hope this was helpful!

TLsf

Posted on Sep 26, 2008 (permalink)

Thanks. This is exactly what I needed. Just this line of code was sufficient:

$find("RadEditor1").set_html("test value");

Reply