HTML Editor

Posted by Community Admin on 13-Mar-2011 00:00

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?

Posted by Community Admin on 13-Mar-2011 00:00

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>

<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

Posted by Community Admin on 14-Mar-2011 00:00

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();

Posted by Community Admin on 14-Mar-2011 00:00

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

Posted by Community Admin on 25-May-2011 00:00

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!

Posted by Community Admin on 25-May-2011 00:00

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();

Posted by Community Admin on 25-May-2011 00:00

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!

Posted by Community Admin on 25-May-2011 00:00

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

Posted by Community Admin on 04-Dec-2012 00:00

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

Posted by Community Admin on 05-Dec-2012 00:00

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.

Posted by Community Admin on 01-May-2013 00:00

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.

This thread is closed

All Replies