+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / How to use web editor in a user control?

How to use web editor in a user control?

14 posts, 0 answered
  1. Stephen
    Stephen avatar
    70 posts
    Registered:
    09 Jun 2009
    14 Dec 2009
    Link to this post
    I created a user control which let users to add content. Is it possible to use the web editor(RadEditor) in the user control so that users can has the same way to add/modify the content as they work with the generic content control? Thanks.
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    15 Dec 2009
    Link to this post
    Hello Stephen,

    Thank you for using our services.

    You can take a look at the following KB article: How to wrap a Generic Content control in 3.6 SP1. The other way is to create a custom WebEditor class in App_Code. Something similar to this one:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Cms.Web.UI;
    using Telerik.Web.UI;
     
    /// <summary>
    /// Summary description for RadEditorSelector
    /// </summary>
    public class RadEditorSelector : WebUITypeEditor<String>
    {
        public RadEditorSelector()
        {
            //
            // TODO: Add constructor logic here
            //
        }
     
        public override string Value
        {
            get
            {
                string obj = (string)this.ViewState["ReturnedValue"];
               return (string)editor.Content;
            }
            set
            {
                this.ViewState["ReturnedValue"] = value;
            }
        }
     
        protected override void CreateChildControls()
        {
            base.CreateChildControls();
     
            editor = new RadEditor();
            editor.Skin = "Black";
            Controls.Add(editor);
            this.Value = editor.Content.ToString();
        }
     
        private RadEditor editor;
    }


    And then make it the web editor for some property, like this:
    [Telerik.Cms.Web.UI.WebEditor("RadEditorSelector, App_Code")]
       public String Text
       {
           get
           {
               return this.text;
           }
           set
           {
                   this.text = value;
           }
       }
       private string text;

    Note that this is just a code sample in order to make this WebEditor completely working you should customize it to fit your needs. A tutorial that explains the creation of WebEditors can be found here: Creating a custom WebUITypeEditor

    Sincerely yours,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Stephen
    Stephen avatar
    70 posts
    Registered:
    09 Jun 2009
    15 Dec 2009
    Link to this post
    Thanks Radoslav.

    I have created a simple Control and Control Designer.

    There is a wired thing I noticed when I used my user control to update content. The CssStyle is updated without any problem when I pick up an option from the radiobutton list, but I have to update the content in RadEditor twice in order to make changes. (e.g the original value in RadEditor is 'aaa', I update the value to 'bbb' in it, but nothing is changed after I hit the 'I'm Done' button. I have to edit one more time to get the updated value.) Can you help me? Thanks in advance.

    The control is called "Box" and has only 2 properties; CssStyle & Content.  The control simply displays the "Content" surrounded by a border.  The color of the border is determined by "CssStyle".

    The Control Designer presents a "friendly" way to change the 2 control properties (RadioButtonList and RadEditor).  The Control Designer also shows how to apply custom stylesheets to a Control Designer.

    The code for Control Designer
    BoxBase.cs
    using System; 
    using System.Data; 
    using System.Configuration; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Web.UI.HtmlControls; 
     
    namespace UserControls 
        /// <summary> 
        /// Summary description for BoxBase 
        /// </summary> 
        using Telerik.Framework.Web.Design; 
        [ControlDesigner("UserControls.BoxControlDesigner, App_Code")] 
        public class BoxBase : UserControl 
        { 
            private string cssStyle = "gray"
            private string content = ""
            private string content2 = ""
     
            public string CssStyle 
            { 
                get 
                { 
                    return cssStyle; 
                } 
                set 
                { 
                    cssStyle = value
                } 
            } 
     
            public string Content 
            { 
                get 
                { 
                    return content; 
                } 
                set 
                { 
                    content = value
                } 
            } 
     
            public string Content2 
            { 
                get 
                { 
                    return content2; 
                } 
                set 
                { 
                    content2 = value
                } 
            } 
        } 

    BoxControlDesigner.cs
    using System; 
    using System.Collections.Generic; 
    using System.Text; 
    using System.Web.UI; 
    using Telerik.Cms.Web.UI; 
    using System.IO; 
    using Telerik.Framework.Web.Design; 
    using System.Web.UI.WebControls; 
    using System.ComponentModel; 
    using Telerik.Utilities.Reflection; 
    using Telerik.Events.WebControls; 
    using Telerik.Web.UI; 
    using System.Diagnostics; 
    using System.Web; 
    using System.Web.UI.HtmlControls; 
     
    namespace UserControls 
        using Telerik.Cms.Web.UI; 
        /// <summary> 
        /// Inherits ControlDesigner class and represents the control designer of Image web control. 
        /// </summary> 
        public class BoxControlDesigner : Telerik.Framework.Web.Design.ControlDesigner 
        { 
            private Container container; 
     
            /// <summary> 
            /// Default constructor. Initializes a new instance of ImageControlDesigner class. 
            /// </summary> 
            public BoxControlDesigner() 
            { 
            } 
     
            /// <summary> 
            /// Creates the child controls in ImageControlDesigner control. 
            /// </summary> 
            protected override void CreateChildControls() 
            { 
                this.Controls.Clear(); 
     
                this.container = new Container(this); 
     
                BoxBase box = (BoxBase)base.DesignedControl; 
     
                // Load the ASCX template assocated with this ControlDesigner 
                string path = "~/UserControls/GSSI/BoxControlDesigner.ascx"
                ITemplate itemTemplate = this.Page.LoadTemplate(path); 
     
                itemTemplate.InstantiateIn(container); 
                this.container.CssStyle.Text = box.CssStyle; 
                this.container.CssStyle.SelectedIndexChanged += new EventHandler(ItemChanged); 
     
                this.container.Content.Html = box.Content; 
                this.container.Content.TextChanged += new EventHandler(ContentChanged); 
     
                //this.container.Content2.Html = box.Content2; 
                //this.container.Content2.TextChanged += new EventHandler(Content2Changed); 
     
                this.Controls.Add(this.container); 
     
                //// The ASCX template found above contains the Control Tags that are referred to below. 
     
                //// Attach an event to the CssStyle control found in the ASCX template. 
                //RadioButtonList rad_CssClass = (RadioButtonList)Controls[0].FindControl("CssStyle"); 
                //// Attach an event to the "CssStyle" control. 
                //rad_CssClass.SelectedIndexChanged += new EventHandler(ItemChanged); 
     
                //// Find the "Content" control in the ASCX template. 
                //RadEditor rad_Content = (RadEditor)Controls[0].FindControl("Content"); 
                //// Preset the starting value of the "Content" control. 
                //rad_Content.Html = TypeDescriptor.GetProperties(base.DesignedControl).Find("Content", false).GetValue(base.DesignedControl).ToString(); 
                //// Attach an event to the "Content" control. 
                //rad_Content.TextChanged += new EventHandler(ContentChanged);         
            } 
     
            /// <summary> 
            /// This code is executed just before the page renders. 
            /// </summary> 
            protected override void OnPreRender(EventArgs e) 
            { 
                base.OnPreRender(e); 
     
                // We must use our own stylesheets for this Control Designer. 
                // This code adds our custom stylesheet to the page. 
                HtmlLink css = new HtmlLink(); 
                css.Href = "/UserControls/GSSI/ControlDesigner.css"
                css.Attributes.Add("rel", "stylesheet"); 
                css.Attributes.Add("type", "text/css"); 
     
                this.Page.Header.Controls.Add(css); 
            } 
     
            /// <summary> 
            /// Generic method that is executed when values are changed. 
            /// </summary> 
            public void ItemChanged(object sender, EventArgs e) 
            { 
                // Our Control ID's on the ASCX template match the Property names that 
                // we are changing.  As near as I can tell "UpdateProperty" gets the 
                // ID of the "sender" it is passed.  If the "ID" matches a Property 
                // of the Control we're editing, then it takes the "Value". 
     
                ////base.UpdateProperty(sender, base.DesignedControl); 
     
                ((BoxBase)base.DesignedControl).CssStyle = ((RadioButtonList)sender).Text; 
            } 
     
            /// <summary> 
            /// Executed when Content is changed. 
            /// </summary> 
            public void ContentChanged(object sender, EventArgs e) 
            { 
                // Our Content control is a RadEditor.  This control type is not  
                // accepted by "UpdateProperty".  So I am going to create a  
                // "TextBox", copy the "Html" value over, and pass this new 
                // TextBox to "UpdateProperty".  I'm not a fan of this.   
                // Suggestions are welcome! 
     
                TextBox ourTextControl = new TextBox(); 
                ourTextControl.ID = "Content"
                ourTextControl.Text = ((RadEditor)sender).Html; 
     
                base.UpdateProperty(ourTextControl, base.DesignedControl); 
     
                ((BoxBase)base.DesignedControl).Content = ((RadEditor)sender).Html; 
            } 
     
            public void Content2Changed(object sender, EventArgs e) 
            { 
                // Our Content control is a RadEditor.  This control type is not  
                // accepted by "UpdateProperty".  So I am going to create a  
                // "TextBox", copy the "Html" value over, and pass this new 
                // TextBox to "UpdateProperty".  I'm not a fan of this.   
                // Suggestions are welcome! 
     
                ////TextBox ourTextControl = new TextBox(); 
                ////ourTextControl.ID = "Content"
                ////ourTextControl.Text = ((RadEditor)sender).Html; 
     
                ////base.UpdateProperty(ourTextControl, base.DesignedControl); 
     
                ((BoxBase)base.DesignedControl).Content2 = ((RadEditor)sender).Html; 
            } 
     
            private class Container : GenericContainer<BoxControlDesigner> 
            { 
                public Container(BoxControlDesigner owner) 
                    : base(owner) 
                { 
                } 
     
                public RadioButtonList CssStyle 
                { 
                    get 
                    { 
                        if (this.cssStyle == null) 
                            this.cssStyle = base.FindRequiredControl<RadioButtonList>("CssStyle"); 
                        return this.cssStyle; 
                    } 
                } 
     
                public RadEditor Content 
                { 
                    get 
                    { 
                        if (this.content == null) 
                            this.content = base.FindRequiredControl<RadEditor>("Content"); 
                        return this.content; 
                    } 
                } 
     
                //public RadEditor Content2 
                //{ 
                //    get 
                //    { 
                //        if (this.content2 == null) 
                //            this.content2 = base.FindRequiredControl<RadEditor>("Content2"); 
                //        return this.content2; 
                //    } 
                //} 
                RadioButtonList cssStyle; 
                RadEditor content, content2; 
            } 
        } 
     

    BoxControlDesigner.ascx
    <%@ Register Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" TagPrefix="telerik" %> 
    <div class="control_designer"
        <div class="control_designer_content"
            <asp:Label ID="Label1" AssociatedControlID="CssStyle" CssClass="item_label" runat="server">Choose the box color:</asp:Label>  
            <asp:RadioButtonList ID="CssStyle" CssClass="list_horizontal" runat="server"
                <asp:ListItem Text="Gray" Value="gray" /> 
                <asp:ListItem Text="Blue" Value="blue" /> 
                <asp:ListItem Text="Green" Value="green" /> 
            </asp:RadioButtonList> 
             
            <div> 
                <telerik:RadEditor  
        runat="server"  
        ID="Content" 
        ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css" 
        ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"     
        Skin="WebBlue"     
        NewLineBr="False" 
        Height="360px"  
        Width="98%" 
        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> 
            </div> 
             
            <br /> 
        </div> 
    </div> 

    Box.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Box.ascx.cs" Inherits="UserControls_GSSI_Box" %> 
    <div id="div_Box" style="border: solid 2px gray;" runat="server"
        <asp:Literal ID="Content1" runat="server"></asp:Literal> 
    </div> 
     
     
    public partial class UserControls_GSSI_Box : UserControls.BoxBase 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            div_Box.Style.Clear(); 
            div_Box.Style.Add("border", "solid 2px " + CssStyle); 
            ContentContent1.Text = Content; 
        } 
     

    Regards,
    Stephen
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    16 Dec 2009
    Link to this post
    Hi Stephen,

    Thank you for getting back to me.

    Can you try build your control as a Custom control, rather than as a user control. A tutorial on this can be found here - Using Templates in Custom Sitefinity Controls. I have converted the code that you have sent to a custom control and it all works as it should. Find the control attached to my post.

    All the best,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Stephen
    Stephen avatar
    70 posts
    Registered:
    09 Jun 2009
    16 Dec 2009
    Link to this post
    Hi Radoslav,

    The problem still exists.

    I used your attached code and added the following line in web.config file.
    <add name="Box" section="GSSI" type="BoxControl, App_Code" description="Lot Details" />

    For test purpose, I added another textbox control just below the RadEditor control in the custom control. I dragged it on my page and gave values and the page correctly shows the initial values from both controls. Then I modified the values both in the RadEditor and Textbox control and click 'Done' button. The value in textbox control was updated simultaneously, but the value in RadEditor kept the same. I had to go back to modify the value in RadEditor again to get the updated value. I tested in IE and Firefox and both have the same issue. Can you help? Thanks in advance.

    Stephen
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    17 Dec 2009
    Link to this post
    Hello Stephen,

    Unfortunately I am unable to reproduce this with the control I have sent with my previous response. See attached screen cast to see how the control behaves on my side. You might have disabled the ViewState for the page or control.

    Best wishes,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Jaime Weise
    Jaime Weise avatar
    120 posts
    Registered:
    02 Nov 2008
    11 Mar 2010
    Link to this post
    I have made a slight adjustment to the uppermost code example in this post. This seems to fix an issue with the code not populating the editor.
     ORIGINAL
       
    protected override void CreateChildControls()
        {
            base.CreateChildControls();
     
            editor = new RadEditor();
            editor.Skin = "Black";
            Controls.Add(editor);
            this.Value = editor.Content.ToString();
        }


    When you want to update content this example fails to repopulate the edtior with the previously save content. This is not very desirable. I know this sample is incomplete. I have found that adding a single line to this code actual persist information properly and make this code useable. I don't know if there are any problems with this code but it works great so far to me.

    ADJUSTED
            editor = new RadEditor();
            editor.Skin = "Black";
            Controls.Add(editor);
               // Added the follwing line of code.
               editor.Content = (String)ViewState["ReturnedValue"];
            this.Value = editor.Content.ToString();

    Thanks for such and easy way to add a text editor for usercontrols. This is the holy grail as far as creating templated content user controls in my opinion.
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    11 Mar 2010
    Link to this post
    Hello jaime,

    It is better to work directly with the Value property

    public override string Value
     {
         get
         {
            if(!String.IsNullOrEmpty(editor.Content.ToString()))
             return (string)editor.Content;
            return _value;
         }
         set
         {
             this._value = value;
         }
     }
     
     protected override void CreateChildControls()
     {
         base.CreateChildControls();
         editor = new RadEditor();
         editor.ContentAreaCssFile = "~/Files/newstyle.css";
         editor.Skin = "Black";
         editor.Width = 580;
         //editor.Height = 200;
         //editor.ToolsFile = "~/Files/ToolsFile.xml";
         Controls.Add(editor);
         string editorContent = this.editor.Content;
          
         if (String.IsNullOrEmpty(Value))
             this.Value = editor.Content.ToString();
         editor.Content = this.Value;
     }
     
     protected override void CreateChildControls()
     {
         base.CreateChildControls();
            ....
                  ....
         Controls.Add(editor);
         string editorContent = this.editor.Content;
          
         if (String.IsNullOrEmpty(Value))
             this.Value = editor.Content.ToString();
         editor.Content = this.Value;
     }


    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  9. Jaime Weise
    Jaime Weise avatar
    120 posts
    Registered:
    02 Nov 2008
    11 Mar 2010
    Link to this post
    Ok thanks,
    I just realized with this configuration I can't get the images to work in the editor. Is there any reason this might happen?
  10. Jaime Weise
    Jaime Weise avatar
    120 posts
    Registered:
    02 Nov 2008
    11 Mar 2010
    Link to this post
    This is due to the fact that the controls that allow you to process images and links or other are popping up behind the control. Any suggestions to bring these to the front of the editor window. I was able to get the image editor to show by setting the Content div.Dialog class to z-index 3000 which is less than 3011(image editor is set to this depth).
  11. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    11 Mar 2010
    Link to this post
    Hello jaime,

    You should decrease the value of the z-index in div.Dialog class in Sitefinity/Admin/Themes/Default/PropertyDlg.css. The problem you have is related to the z-index.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  12. Jaime Weise
    Jaime Weise avatar
    120 posts
    Registered:
    02 Nov 2008
    11 Mar 2010
    Link to this post
    I added that to my previous post as I figured it out myself.

    Further complicating things I am getting an error 'FullPath' is null or not an object which leads me to believe that a javascript is not getting loaded.

    Jaime
  13. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    11 Mar 2010
    Link to this post
    Hi jaime,

    In one of the previous posts I provided the the css with the correct z-index which seems you use now.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  14. Jaime Weise
    Jaime Weise avatar
    120 posts
    Registered:
    02 Nov 2008
    11 Mar 2010
    Link to this post
    Yes thanks,

    I think you might have missed my last comment pertaining to the full path problem while trying to use the image editor.
Register for webinar
14 posts, 0 answered