Rich BoxTextEditor

Hi guys,


I have a custom control designer built like in your tutorial for editing a user control.

Let's say the control has a text property in which I will have some html source.
What I want to do is bind this property in edit mode with some sort of rich text box editor with all those bold,italic font, link etc... stuff. 
I tried using a  HtmlField control but I couldn't enable the editor, the text appears as a label, don't know which needs to be set for this control.

I would very much appreciate if you could help me with a solution.

Best Regards,
Alex

I have managed to use HtmlField , I needed it to add a form manager on the template, but still can't get to bind the HtmlField with  my c# property.

Any Ideea how to do this from js, and to which property of the HtmlField I need to bind to populate with the text from my c# property?

Thanks,
Alex

Managed to do that as well. Now when I hit save the text from HtmlField goes to the property I want.
However could really use a bit of help on the following:

I have a text box, the HtmlField and a  button all in my custom control designer . Is it possible when I click the button to get the text from the HtmlField into the textbox?

Thanks in advance,
Alex

Hello Alex,

The HtmlField has a DisplayMode property, which you should set to "Write" if you want an editable textbox to appear. You've already figured that out.

Are you manually persisting the value from the HtmlField to your property? If so, it would be almost the same to put that value in the TextBox. The HtmlField client component has a get_value() method. You can use that to get the text and then set it to the TextBox using jQuery:

Hi Slavo,

Seams like a solution.
My button from designer has onclick event set like this onclick=" myFunc();" 
Inside myFunc I should probably place your code.
But Where should my func go? In the js or at top of the designer. if I try creating myFunc on top of the designer

this._htmlField.get_value();

won't work anymore .

If I try defining the function in the js function is not visible. 

How should I define the function and where?

Thanks,
Alex

Hi Alex,

If you subscribe to the onclick event of the button in the template, like you are doing, you won't have access to the HtmlField, because the click handler is created in the global scope. Instead, you can subscribe to the button from javascript.

• Create a reference to your button in the server component of your designer:
  
  protected virtual HyperLink Button

      get

      

          return this.Container.GetControl<HyperLink>("btnTest", true);

      
• Pass the button reference to the client component in GetScriptDescriptors()
  
  descriptor.AddElementProperty("_button", this.Button.ClientID);
• Subscribe to the click event in the javascript of the designer
  
  _onLoad: function (sender, args)

      $addHandler(this._button, "click", this._onButtonClick);

  ,

   

  _onButtonClick: function (sender, args)

      var text = this._htmlField.get_value();

      jQuery(this._textBox).attr("text", text);

Didn't thought at this approach.
Thanks  Slavo