HTML Editor - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

HTML Editor

  • HTML Editor
  • 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?
  • 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
  • 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();
            

  • 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
  • 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!
  • 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();
  • 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!
  • 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
  • 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
  • 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.
  • 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.