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

Forums / Developing with Sitefinity / RichTextEditor for MVC Widget Public Properties

RichTextEditor for MVC Widget Public Properties

5 posts, 1 answered
  1. James
    James avatar
    12 posts
    Registered:
    28 Mar 2013
    26 Nov 2013
    Link to this post
    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.
  2. James
    James avatar
    12 posts
    Registered:
    28 Mar 2013
    26 Nov 2013
    Link to this post
    I found this site for the widget control designer - http://www.sitefinity.com/blogs/joshmorales/posts/team-blog/2011/09/20/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????
  3. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    28 Nov 2013
    Link to this post
    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:

    Regards,
    Pavel Benov
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  4. James
    James avatar
    12 posts
    Registered:
    28 Mar 2013
    02 Dec 2013 in reply to Pavel Benov
    Link to this post
    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.
  5. James
    James avatar
    12 posts
    Registered:
    28 Mar 2013
    02 Dec 2013
    Link to this post
    Just found the same question of how to get the rich text box woking in the designer answered in this question - http://www.sitefinity.com/developer-network/forums/developing-with-sitefinity-/widget-with-htmlfield

    here is the text in case the link goes bad


    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


    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();
    Answered
5 posts, 1 answered