Sitefinity: How to use an HTML editor in a custom widget designer

Sam Rueby Sitefinity, Software Development, Web Development 2 Comments

It constantly shocks me that Telerik makes all of these fancy widgets and form controls but they’re somehow not painfully-easy to implement when creating custom widget designers. Even when using Telerik’s Visual Studio plugin Sitefinity Thunder, it’s not a simple point-and-click to use an HTML editor for a widget property.

Well I need these widgets I create to be as simple as possible for the client, which means using the best form control available for the job. I needed an HTML editor and thanks to this forum post and some debugging on my own, I was able to implement this.

I am going to start from the point where you already have a Sitefinity Widget, and have already created a widget designer for it.

In this example, I’m going to have my Body property be set by the HTML editor.

 

First, add an HtmlField in the widget designer markup.

Go ahead and configure the HtmlField with whatever properties that fit your needs.

Next, go into the widget designer code-behind and add the highlighted lines below.

 

Lastly, the most error-prone part, add the highlighted lines in the JavaScript-behind for the widget deisgner.

That’s all the code you should need. Now if you compile Sitefinity and go into your backend, drag your widget onto the page, choose properties and see your HTML editor in action.

Animated GIF showing the result of adding an HTML editor to  the custom widget designer

  • Nathan

    Thanks for posting this. The procedures worked for me.

    • SamRueby

      Glad it helped someone!