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

Forums / Sitefinity SDK / HTML Editor

HTML Editor

11 posts, 0 answered
  1. Jerami Tainter
    Jerami Tainter avatar
    27 posts
    Registered:
    29 Oct 2009
    13 Mar 2011
    Link to this post
    I have a HtmlField server control in a control designer of mine. How do I capture the value that was entered in the html field in javascript?
  2. Jerami Tainter
    Jerami Tainter avatar
    27 posts
    Registered:
    29 Oct 2009
    13 Mar 2011
    Link to this post
    Here is my designer template:
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
    <sf:FormManager ID="formManager" runat="server" />
    <div class="sfContentViews">
        <div id="RotatorOptions">
            <div style="width: 660px; overflow: hidden;">
                <div id="groupSettingPageSelect">
                    <ul class="sfTargetList">
                        <li>
                            <label for="Title" class="sfTxtLbl">Section Title</label>
                            <input type="text" id="Title" class="sfTxt" />
                        </li>
                    </ul>
                    <sf:HtmlField
                        ID="htmlEditor"
                        runat="server"
                        Width="99%"
                        Height="370px"
                        EditorContentFilters="DefaultFilters"
                        EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
                        DisplayMode="Write"
                        FixCursorIssue="True">
                    </sf:HtmlField>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $("body").addClass("sfContentBlockDesigner");
    </script>


    Here is my ContentDesigner.cs

    public class RogueContentDesigner : ControlDesignerBase
        {
            protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
            {
                base.DesignerMode = ControlDesignerModes.Simple;
            }
     
            protected override string LayoutTemplateName
            {
                get { return "Rogue Content Designer Template"; }
            }
     
            private string _layoutTemplatePath = "~/UserControls/Generic Content/RogueContentDesignerTemplate.ascx";
            public override string LayoutTemplatePath
            {
                get { return _layoutTemplatePath; }
                set { _layoutTemplatePath = value; }
            }
     
            private string _scriptPath = "~/UserControls/Generic Content/RogueContentDesigner.js";
            public string DesignerScriptPath
            {
                get { return _scriptPath; }
                set { _scriptPath = value; }
            }
     
            public override IEnumerable<ScriptReference> GetScriptReferences()
            {
                var scripts = base.GetScriptReferences() as List<ScriptReference>;
                if (scripts == null) return base.GetScriptReferences();
     
                scripts.Add(new ScriptReference(DesignerScriptPath));
                return scripts.ToArray();
            }
     
            protected virtual HtmlField HtmlEditor
            {
                get
                {
                    return this.Container.GetControl<HtmlField>("htmlEditor", true);
                }
            }
        }

    Here is my javascript:

    Type.registerNamespace("SitefinityWebApp.UserControls.Generic_Content");
     
    SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner = function (element) {
        SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner.initializeBase(this, [element]);
    }
     
    SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner.prototype = {
        initialize: function () {
            SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner.callBaseMethod(this, 'initialize');
        },
     
        dispose: function () {
            SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner.callBaseMethod(this, 'dispose');
        },
     
        refreshUI: function () {
            //this._refreshMode = true;
            var data = this.get_controlData();
            jQuery("#Title").val(data.Title);
          
        },
     
        applyChanges: function () {
     
            var controlData = this.get_controlData();
            controlData.Title = jQuery("#Title").val();
            controlData.Content = "Test";
     
        }
    };
     
     
    SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner.registerClass('SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

    What Im missing is how to get the htmlField values and how to load the htmlField....

    Hoping someone can help me soon...wasted an entire Saturday trying to figure this out.  Thanks
  3. Jerami Tainter
    Jerami Tainter avatar
    27 posts
    Registered:
    29 Oct 2009
    14 Mar 2011
    Link to this post
    Finally

    Here is the final Javascript file

    Type.registerNamespace("SitefinityWebApp.UserControls.Generic_Content");
     
    SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner = function (element) {
        this._htmlEditor = null;
        SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner.initializeBase(this, [element]);
    }
     
    SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner.prototype = {
        initialize: function () {
            SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner.callBaseMethod(this, 'initialize');
        },
     
        dispose: function () {
            SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner.callBaseMethod(this, 'dispose');
        },
     
        get_htmlEditor: function () {
            return this._htmlEditor;
        },
        set_htmlEditor: function (value) {
            this._htmlEditor = value;
        },
     
        refreshUI: function () {
            //this._refreshMode = true;
            var data = this.get_controlData();
            jQuery("#Title").val(data.Title);
            this.get_htmlEditor().set_value(data.Content)
            //jQuery("#ctl06_ctl00_ctl00_ctl00_ctl00_htmlEditor").html(data.Content);
     
            //jQuery("#Content").val(data.Content);
        },
     
        applyChanges: function () {
     
            var controlData = this.get_controlData();
            controlData.Title = jQuery("#Title").val();
            controlData.Content = this.get_htmlEditor().get_value();
        }
    };
     
    SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner.registerClass('SitefinityWebApp.UserControls.Generic_Content.RogueContentDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

    Then I had to add this function to ContentDesigner.cs

    public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            {
                var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
                var desc = (ScriptControlDescriptor)scriptDescriptors.Last();
                var htmlEditor = this.HtmlEditor;
                desc.AddComponentProperty("htmlEditor", HtmlEditor.ClientID);
                return scriptDescriptors.ToArray();
            }

  4. Duneel
    Duneel avatar
    166 posts
    Registered:
    08 Dec 2010
    14 Mar 2011
    Link to this post
    Hi Jerami,

    You can get and set values in HTML Editor as follows.

    refreshUI: function () {
            this._refreshMode = true;
            var data = this.get_controlData();
              
            // set values....
            this.get_htmlContentEditor()._setEditorHtml(data.SomeContent);
        },
      
        // Forces the designer to apply the changes on UI to the cotnrol Data buth
        applyChanges: function () {
            var data = this.get_controlData();
              
            // Get values....
            data.SomeContent = this.get_htmlContentEditor().get_value();
        }


    Cheers!
    Duneel
  5. FlR
    FlR avatar
    49 posts
    Registered:
    05 Oct 2010
    25 May 2011
    Link to this post
    Hi Duneel, Jeremi

    I've tried your approach but when I'm makeing 
    alert(this.get_htmlContentEditor().get_value()); I'm getting a js error saying:
    this.get_htmlContentEditor().get_value is not a function

    If I do alert(this.get_htmlContentEditor()); the message I get is:
    [object HTMLDivElement]

    On js I have:

    get_htmlContentEditor: function () {
            return this._htmlContentEditor;
        },
        set_htmlContentEditor: function (value) {
            this._htmlContentEditor = value;
        },

    and on designer cs cs I have

    ....................
    desc.AddElementProperty("txtTitle", txtTitleCtrl.ClientID);
    desc.AddElementProperty("htmlContentEditor", htmlContentEditor.ClientID);
    desc.AddComponentProperty("lstSections", lstSectionsCtrl.ClientID);
    return scriptDescriptors.ToArray();
    .....................

     protected virtual HtmlField htmlContentEditor
     {
                get
                {
                    return this.Container.GetControl<HtmlField>("htmlContentEditor", true);
                }
    }

    do you know what the cause may be?

    Thank you!
  6. FlR
    FlR avatar
    49 posts
    Registered:
    05 Oct 2010
    25 May 2011
    Link to this post
    Hi,

    Thank you for quick reply:

    Type.registerNamespace("Telerik.Sitefinity.Samples");
     
    Telerik.Sitefinity.Samples.SimpleViewCustomDesigner = function (element) {
     
        // element
        this._textBoxControl = null;
        Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.initializeBase(this, [element]);
     
    }
     
    Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.prototype = {
     
        initialize: function () {
            Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.callBaseMethod(this, 'initialize');
     
        },
     
        dispose: function () {
            Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.callBaseMethod(this, 'dispose');
     
        },
     
        get_txtTitle: function () {
            return this._txtTitle;
        },
        set_txtTitle: function (value) {
            this._txtTitle = value;
        },
     
        get_htmlContentEditor: function () {
            return this._htmlContentEditor;
        },
        set_htmlContentEditor: function (value) {
            this._htmlContentEditor = value;
        },
     
        get_lstSections: function () {
            return this._lstSections;
        },
        set_lstSections: function (value) {
            this._lstSections = value;
        },
     
        /* --------------------------------- event handlers --------------------------------- */
     
     
        /* ----------------------------- public methods ----------------------------- */
     
     
        refreshUI: function () {
            var data = this.get_controlData();
            console.log(this.get_htmlContentEditor());
            //this.get_htmlContentEditor().set_value("TEST"); // ERROR!!!
        },
     
        // forces the designer to apply the changes on UI to the cotnrol Data
        applyChanges: function () {
            var data = this.get_controlData();
            alert(this.get_lstSections().get_selectedItem().get_value());
            alert(this.get_txtTitle().value);
            data.txtTitleCtrlValue = this.get_txtTitle().value;
            alert(this.get_htmlContentEditor().innerHTML);
            alert(this.get_htmlContentEditor().get_value()); // ERROR!!!
        }
     
    }
     
    Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.registerClass('Telerik.Sitefinity.Samples.SimpleViewCustomDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
     
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
  7. Duneel
    Duneel avatar
    166 posts
    Registered:
    08 Dec 2010
    25 May 2011
    Link to this post
    Hello FIR,

    I noticed the following things in your script code. Can you try them and let me know.

    1. Add this._htmlContentEditor = null; after his._textBoxControl = null;
    2. To set values in the editor use this.get_htmlContentEditor()._setEditorHtml(data.ContentTop);
    3. Change the following two lines
        desc.AddElementProperty("txtTitle", txtTitleCtrl.ClientID);
        desc.AddElementProperty("htmlContentEditor", htmlContentEditor.ClientID);

        TO
        
        desc.AddComponentProperty("txtTitle", txtTitleCtrl.ClientID);
        desc.AddComponentProperty("htmlContentEditor", htmlContentEditor.ClientID);

    Cheers!
  8. FlR
    FlR avatar
    49 posts
    Registered:
    05 Oct 2010
    25 May 2011
    Link to this post
    Hi Duneel,

    Thank you again. It woorked. 

    The difference between AddComponentProperty and  AddElementProperty is that AddElementProperty should be used for asp.net controls and AddComponentProperty for Sitefinity / RadAjax controls?

    If for txtTitle I'm using asp:Textbox get_txtTitle() returns null
  9. Jonathan
    Jonathan avatar
    26 posts
    Registered:
    23 Jul 2012
    04 Dec 2012
    Link to this post
    Sorry to resurrect this post, but I too am looking for clarification on the difference between AddElementProperty and AddComponentProperty. Is it, as noted above, the difference between ASP.Net controls and RAD Controls?

    Thanks
  10. Randy Hodge
    Randy Hodge avatar
    96 posts
    Registered:
    03 Nov 2014
    05 Dec 2012
    Link to this post
    Hi Johnathan,

    AddElementProperty is for simple DOM controls (i.e. Button, Label) and passes the Cilent Id

    AddComponentProperty is for component controls (i.e. a control with it's own .cs, .ascx., .js parts) and passes the object (.js part) so you can work with it's client-side API.

    I hope this answers your question.

    Regards,
    Randy Hodge
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  11. Adam
    Adam avatar
    23 posts
    Registered:
    05 Apr 2013
    01 May 2013 in reply to Randy Hodge
    Link to this post
    This example doesn't work at all for me. But, I'm using the typical set_value/get_value pattern, as for the other SF fields and it works fine.
11 posts, 0 answered