Sitefinity User Group

Using the Sitefinity RadEditor in a custom control template

10/2/2009 10:05:38 AM -

We had a need to use the RadEditor in the form that it appears throughout Sitefinity, including the library item selector etc. when editing a meta field we had added to the Images and Documents module. We needed the meta field to be saved as HTML.

I thought this would be quite straightfoward, I opened up a template from the downloadable external templates file for Sitefinity 3.7 and took a look at how they were implementing the editor on that page. I copied and pasted it onto my template, refreshed my image edit screen and... got an error. After looking at it for some time I could not see what the issue was, so I posted a support ticket to Sitefinity, and as usual, the next morning I had a response in my nbox!

Here is what you need to put on your template in order to get the RadEditor to function. The main difference from what was on the templates I was looking at and this is the used of the RadCodeBlock control.

   <telerik:RadEditor runat="server" id="Description"  
     ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"  
     ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"  
     Skin="WebBlue"   
     NewLineBr="False"  
     Width="95%"  
     ContentFilters="FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent">   
     <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="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />  
     </CssFiles>  
 </telerik:RadEditor>  
   
  <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">   
 <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")  
                         args.parentNode.replaceChild(editorArgs, args);  
                     else {  
                         var cloned = args.cloneNode(true);  
                         var div = args.ownerDocument.createElement("DIV");  
                         div.appendChild(cloned);  
                         editorArgs.pasteHtml(div.innerHTML);  
                     }  
                 }  
                 var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx") %>';  
                 editor.showExternalDialog(  
    path,  
    editorArgs,  
    750,  
    515,  
    myCallbackFunction,  
    null,  
    'ImageLibraryDialog',  
    true,  
    Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,  
    false,  
    true)  
             };  
   
             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")  
                         args.parentNode.replaceChild(editorArgs, args);  
                     else {  
                         var cloned = args.cloneNode(true);  
                         var div = args.ownerDocument.createElement("DIV");  
                         div.appendChild(cloned);  
                         editorArgs.pasteHtml(div.innerHTML);  
                     }  
                 }  
                 var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx") %>';  
                 editor.showExternalDialog(  
    path,  
    editorArgs,  
    750,  
    515,  
    myCallbackFunction,  
    null,  
    'ImageLibraryDialog',  
    false,  
    Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,  
    false,  
    true)  
             };  
   
             Telerik.Web.UI.Editor.CommandList["LinkManager"] = function(commandName, editor, args) {  
                 var editoreditorArgs = editor.getSelectedElement();  
                 if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A") {  
                     var sel = editor.getSelection();  
                     editorArgs = sel;  
                     editorArgs.Html = sel.getHtml();  
                     editorArgs.Text = sel.getText();  
                 }  
   
                 var myCallbackFunction = function(sender, args) {  
                     if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")  
                         args.parentNode.replaceChild(editorArgs, args);  
                     else {  
                         var cloned = args.cloneNode(true);  
                         var div = args.ownerDocument.createElement("DIV");  
                         div.appendChild(cloned);  
                         editorArgs.pasteHtml(div.innerHTML);  
                     }  
   
                 }  
                 var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>';  
                 editor.showExternalDialog(  
    path,  
    editorArgs,  
    750,  
    515,  
    myCallbackFunction,  
    null,  
    'ImageLibraryDialog',  
    false,  
    Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,  
    false,  
    true)  
             };  
   
             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")  
                         args.parentNode.replaceChild(editorArgs, args);  
                     else {  
                         var cloned = args.cloneNode(true);  
                         var div = args.ownerDocument.createElement("DIV");  
                         div.appendChild(cloned);  
                         editorArgs.pasteHtml(div.innerHTML);  
                     }  
   
                 }  
                 var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>';  
                 editor.showExternalDialog(  
    path,  
    editorArgs,  
    750,  
    515,  
    myCallbackFunction,  
    null,  
    'ImageLibraryDialog',  
    false,  
    Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,  
    false,  
    true)  
             };  
   
             RadEditorCommandList["IncreaseSize"] = function(commandName, editor, oTool) {  
                 var currentWidth = editor.get_element().style.width; //get the width of Telerik RadEditor   
                 var currentHeight = editor.get_element().style.height; //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.get_element().style.width;  
                 var currentHeight = editor.get_element().style.height;  
   
                 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>   
 </telerik:RadCodeBlock>   

Here are the results.

Tags: Customization 3.7

RSS Feed Address Updated

7/16/2009 11:23:01 AM - Adam Crandall

We've moved our feed to Feedburner! Please update your subscriptions.

http://feeds.habaneros.com/Sitefinity

RSS

Using the Sitefinity RadEditor in a custom control template

RSS Feed Address Updated

Categories

Tags

Links

Archive