Adding an XHTML Editor to a Custom Property

Vote:
 

Hello,

Doest anyone know how to add an XHTML Editor like the one on Edit mode to a Custom Property?

Here's the code that I've done but haven't cracked it yet:

/// <summary>

/// PropertyControl implementation used for rendering InformationBox data.

/// </summary>

public class InformationBoxControl : EPiServer.Web.PropertyControls.PropertyStringControl

{

/*

Override CreateXXXControls to control the appearance of the property data in different rendering conditions.

public override void CreateDefaultControls() - Used when rendering the view mode.

public override void CreateEditControls() - Used when rendering the property in edit mode.

public override void CreateOnPageEditControls() - used when rendering the property for "On Page Edit".

*/

#region Controls

protected System.Web.UI.WebControls.CheckBox enabled;

protected PropertyLongStringControl information;

#endregion

/// <informationBox>

/// Gets a value indicating whether [supports on page edit].

/// </informationBox>

/// <value><c>true</c> if [supports on page edit]; otherwise, <c>false</c>.</value>

public override bool SupportsOnPageEdit

{

get

{

return false;

}

}

 

/// <informationBox>

/// Inherited. Initialize the value of the TextBox control.

/// </informationBox>

protected override void SetupEditControls()

{

var informationBox = InformationBoxDetails.DeserializeObject<InformationBoxDetails>(this.ToString());

if (this.enabled != null)

{

this.enabled.Checked = informationBox.Enabled;

}

if (this.information != null)

{

// select chosen options or use EditorToolOption.All

// EditorToolOption.Bold | EditorToolOption.Italic | EditorToolOption.Underline;

//information.EditorToolOptions = EditorToolOption.All;

//information.Name = "MyLongStringProperty";

//myHtmlEditor.InnerProperty = information;

///this.information.Text = informationBox.Information;

}

}

/// <informationBox>

/// Inherited. Applies changes for the posted data to the page's properties when the RenderType property

/// is set to Edit.

/// </informationBox>

public override void ApplyEditChanges()

{

InformationBoxDetails informationBox = new InformationBoxDetails();

informationBox.Enabled = (this.enabled != null) ? this.enabled.Checked : false;

//informationBox.Image = (this.image.PropertyUrl.Value != null) ? this.image.PropertyUrl.Value.ToString() : string.Empty;

informationBox.Information = (this.information != null) ? this.information.PropertyData.Value.ToString() : string.Empty;

string obj = InformationBoxDetails.SerializeObject<InformationBoxDetails>(informationBox);

base.SetValue(obj);

}

/// <informationBox>

/// Creates the edit controls.

/// </informationBox>

public override void CreateEditControls()

{

// create the table

Table tbl = new Table();

this.Controls.Add(tbl);

tbl.BorderColor = System.Drawing.Color.Black;

tbl.BorderStyle = System.Web.UI.WebControls.BorderStyle.Solid;

tbl.BorderWidth = new Unit(1, UnitType.Pixel);

// create a row Title ******************************************

TableRow rowTitle = new TableRow();

tbl.Controls.Add(rowTitle);

// create a cells

enabled = new System.Web.UI.WebControls.CheckBox() { ID = "enabled" };

var labelEnabled = new System.Web.UI.WebControls.Label() { Text = "Enabled" };

TableCell cellEnabled = new TableCell();

rowTitle.Cells.Add(cellEnabled);

cellEnabled.Controls.Add(labelEnabled);

TableCell cellEnabledBox = new TableCell();

rowTitle.Cells.Add(cellEnabledBox);

cellEnabledBox.Controls.Add(enabled);

labelEnabled.AssociatedControlID = enabled.ID;

// create a row Text ************************************

TableRow rowInformation = new TableRow();

tbl.Controls.Add(rowInformation);

// create a cells

information = new PropertyLongStringControl() { ID = "information"};

//information.EditorToolOptions = EditorToolOption.All;

var labelInformation = new System.Web.UI.WebControls.Label() { Text = "Information" };

TableCell cellInformation = new TableCell();

rowInformation.Cells.Add(cellInformation);

cellInformation.Controls.Add(labelInformation);

TableCell cellInformationBox = new TableCell();

rowInformation.Cells.Add(cellInformationBox);

cellInformationBox.Controls.Add(information);

labelInformation.AssociatedControlID = information.ID;

//tbl.ApplyNoWrap();

SetupEditControls();

}

/// <informationBox>

/// Gets the SummaryPage instance for this IPropertyControl.

/// </informationBox>

/// <value>The property that is to be displayed or edited.</value>

public InformationBox InformationBox

{

get

{

return PropertyData as InformationBox;

}

}

}

 

Thanks.

V

#33667
Oct 16, 2009 15:32
Vote:
 

Hi!

Just let your custom PropertyData class method CreatePropertyControl return an instance of the PropertyLongStringControl class. (If you need to adapt the control inherit from PropertyLongStringControland override methods as needed.)

Note! It is important that you in your PropertyData subclass override the EditorToolOptions property to return a non-zero value. If EditorToolOptions is empty a text box will be rendered instead of the rich text edito.

You proabably also want your PropertyData sub class (InformationBox) inherite from PropertyXhtmlString to enable permanent urls for images, documents and links to other pages..

#33693
Oct 18, 2009 21:49
Vote:
 

Hello there,

Thank you for your response.

I tried your suggestions above but got the following "Oject reference not set to an instance of an object".

Am I missing anything?

Thanks.

 

Here's the code:

 namespace Site.Web.Classes.CustomProperties
{
///
/// Custom PropertyData implementation
///
[Serializable]
[PageDefinitionTypePlugIn]
public class Editor : PropertyXhtmlString
{
// TODO: Override members of EPiServer.SpecializedProperties.PropertyXhtmlString to provide your own logic.


public override EPiServer.Core.IPropertyControl CreatePropertyControl()
{
return new EditorControl();
}

}
}

namespace Site.Web.Classes.CustomProperties
{
///
/// PropertyControl implementation used for rendering Editor data.
///
public class EditorControl : PropertyLongStringControl
{
#region Controls

protected EditorWebControl text;

#endregion

///
/// Inherited. Initialize the value of the TextBox control.
///
protected override void SetupEditControls()
{
//var component = ComponentDetails.DeserializeObject(this.ToString());

if (this.text != null)
{
//this.text = component.Text;
}

}

///
/// Inherited. Applies changes for the posted data to the page's properties when the RenderType property
/// is set to Edit.
///
public override void ApplyEditChanges()
{
//base.SetValue(obj);
}


///
/// Creates the edit controls.
///
public override void CreateEditControls()
{
// create the table
Table tbl = new Table();
this.Controls.Add(tbl);
tbl.BorderColor = System.Drawing.Color.Black;
tbl.BorderStyle = System.Web.UI.WebControls.BorderStyle.Solid;
tbl.BorderWidth = new Unit(1, UnitType.Pixel);

// create a row CompTitle ************************************
TableRow rowCompTitle = new TableRow();
tbl.Controls.Add(rowCompTitle);

// create a cells
text = new EditorWebControl() { ID = "text" };
var labelCompTitle = new System.Web.UI.WebControls.Label() { Text = "Text" };
TableCell cellCompTitle = new TableCell();
rowCompTitle.Cells.Add(cellCompTitle);
cellCompTitle.Controls.Add(labelCompTitle);
TableCell cellCompTitleBox = new TableCell();
rowCompTitle.Cells.Add(cellCompTitleBox);
cellCompTitleBox.Controls.Add(text);

labelCompTitle.AssociatedControlID = text.ID;


//tbl.ApplyNoWrap();
SetupEditControls();
}


///
/// Gets the Editor instance for this IPropertyControl.
///
/// The property that is to be displayed or edited.
public Editor Editor
{
get
{
return PropertyData as Editor;
}
}
}
}

public class EditorWebControl : PropertyLongStringControl
{
public override EPiServer.Editor.EditorToolOption EditorToolOptions
{
get
{
return EPiServer.Editor.EditorToolOption.All;
}
}
}

#33810
Oct 20, 2009 15:04
Vote:
 

Ok... May I ask what you try to accomplish with your custom property?

In your code example, delete the whole EditorControl class and let CreatePropertyControl() return one instance of EditorWebControl instead.

#33811
Oct 20, 2009 15:31
Vote:
 

Hi, I am trying to create a custom property which has the xhtml editor, but I want to set a max length that the editor can enter, what is the best way to do this. I have tried adding a javascript attribute to the control, but it never seems to render it?

Cheers

Chris

#35049
Nov 25, 2009 13:02
Vote:
 

Hi!

Here's some sample code on how to validate the length of the input server side. I also tried to set the MaxLength property of the editor since I guessed that this would block input client side but I could not get this to work (that code is commented in the sample). If you are working with EPiServer CMS 6 then you can use the property settings functioanlity in order to make the length setting configurable in the property definition in admin mode.

using System;

using System.Collections.Generic;

using System.Web;

using EPiServer.SpecializedProperties;

using EPiServer.Web.PropertyControls;

using EPiServer.Editor;

using EPiServer.Core;

namespace EPiServer

{

public class MyCustomProperty : PropertyXhtmlString

{

public override IPropertyControl CreatePropertyControl()

{

return new MyCustomEditorPropertyControl();

}

}

public class MyCustomEditorPropertyControl : PropertyLongStringControl

{

public override void ApplyChanges()

{

if (EditControl is HtmlEditor)

{

string text = ((HtmlEditor)EditControl).Text;

if (text.Length > 10)

{

AddErrorValidator("Text can not exceed 10 characters.");

return;

}

}

base.ApplyChanges();

}

//public override void SetupControl()

//{

// base.SetupControl();

// if(EditControl is HtmlEditor)

// {

// ((HtmlEditor)EditControl).MaxLength = 10;

// }

//}

}

}

#35051
Nov 25, 2009 17:40