RichTextEditor for MVC Widget Public Properties

I am trying to get Sitefinity working with MVC.  I've added in a few controllers with public properties.  After I have added these to pages I can go into the page and edit the public properties, but no matter what the type of the property ( int, string, datetime) the only control I have to edit is a plain text box.  Is there any way to connect a richtext box or a datepicker for the content managers to use?  Are there any examples of this?  I've been looking and have not been able to find anything on this.

I found this site for the widget control designer - www.sitefinity.com/.../creating_advanced_sitefinity_4_widget_control_designers

I don't need to add a class, a user control, and a javascript file for EVERY MVC page that I want in the application that has non trivial content.  Do I?  Can't I just add an attribute to the property declaration or something to say that I want to have a rich text editor on the default editor page????

Hi James,

This is the correct way to create a widget with its designer in Sitefinity. I would suggest using Thunder to generate the files needed for the purpose. The reason you need the files is in order for the widget and its designer to be able to communicate and transfer all configurations from the designer back to the control and vice versa. 

Some more useful resources:

• http://www.sitefinity.com/documentation/documentationarticles/developers-guide/sitefinity-essentials/how-does-sitefinity-use-asp.net-mvc/creating-mvc-based-sitefinity-widgets
• http://www.sitefinity.com/documentation/documentationarticles/developers-guide/sitefinity-essentials/controls/working-with-control-designers/creating-simple-control-designers
• You can also take a look at the sample controls in our SDK.

Ok, I installed Thunder and used it to add all the files to add a designer for one of my MVC pages/widgets.  I used it to add the ability to edit the content in two properties.  When I run the app and edit the widget I can see the two text boxes and make the change.  This works just like on the default designer.  The whole point of all this was to change to using a rich text box so that was my next step.

I tried to replace the text box with a radeditor and that did not work at all.  Crazy things like the save button running away from the mouse pointer,.

Looking into it more it seems what I need to do is to replace the text box with

<sfFields:HtmlField
  ID="SafetyCenter2"
  runat="server"
  Width="99%"
  Height="370px"
  EditorContentFilters="DefaultFilters"
  EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
  DisplayMode="Write"
  FixCursorIssue="True">
 </sfFields:HtmlField>

and then go into the designer code and change the AddElementProperty call to AddComponentProperty.

From what I am reading this should work, but when I save I am getting this Javascript error that .toLower() method does not exit.  Seems to not be loading up the HtmlField at all.

"0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'toLowerCase': object is null or undefined"

I have also tried to change the property on the designer file to return a HtmlField value instead of a Control value but this did not work either.

Any ideas of what else I'd need to change to be able to replace a textbox with a rich text box in the widget designer?

And any chance that there will be a change to allow to put rich text boxes in the default designer?  90% of my pages would not need ANY custom designer work at all if I could just put an attribute on properties to simply replace the text box on the default designer with a rich text box.

Just found the same question of how to get the rich text box woking in the designer answered in this question - www.sitefinity.com/.../widget-with-htmlfield

here is the text in case the link goes bad

[quote]
Here you go mate.  First line is current code, 2nd line is replacement code.  These complex control need to be passed with AddComponentProperty
 
Designer.cs:
 ------------
 descriptor.AddElementProperty("htmlText", this.HtmlText.ClientID);
 descriptor.AddComponentProperty("htmlText", this.HtmlText.ClientID);
 
Designer.js:
 ------------
 jQuery(this.get_htmlText()).val(controlData.HtmlText);
 this.get_htmlText().set_value(controlData.HtmlText);
 
controlData.HtmlText = jQuery(this.get_htmlText()).val();
 controlData.HtmlText = this.get_htmlText().get_value();
 
Remember to parse your HTML string before display, as it will now potentially have [sfref] images, links etc..:
 
HtmlPanel.cs:
 -------------
 htmlTextLabel.Text = this.HtmlText;
 htmlTextLabel.Text = LinkParser.ResolveLinks(LinkParser.UnresolveLinks(this.HtmlText), DynamicLinksParser.GetContentUrl, null, false)
Your quote goes here[/quote]

So, to take an autogenerated from Thunder textbox and change it to a nicly formated rich text box do these steps...

1) replace control on the designer.ascx page with this
<sfFields:HtmlField
  ID="HtmlText"
  runat="server"
  Width="99%"
  Height="370px"
  EditorContentFilters="DefaultFilters"
  EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
  DisplayMode="Write"
  FixCursorIssue="True">
 </sfFields:HtmlField>

changing the ID to the same as the textbox.

2) Designer.cs file change the AddElementProperty to AddComponentProperty
3) Designer.js file change the  jQuery(this.get_htmlText()).val(controlData.HtmlText); to
this.get_htmlText().set_value(controlData.HtmlText);
4) Designer.js file change the controlData.HtmlText = jQuery(this.get_htmlText()).val(); to
controlData.HtmlText = this.get_htmlText().get_value();