HTML Editor in Lightswitch

You wont be playing with the HTML client for too long before you realise you need to work with some HTML! There are a number of jQuery editors out there, and they seem to be relatively easy to plug into Lightswitch.

One suggestion though…make sure you choose one that looks clean and simple – there is nothing worse than looking a phone application that has a bunch of crowded colored icons. The one that I have chosen here is called Redactor – possibly the nicest looking editor available. It also has a cool air-mode, which enables your editor to look like a normal text box, but popup with HTML editing features when text is highlighted as shown here:


Redactor can be found here. Note that it is not free – but you could easily find some free alternatives. Take a look at this website for 10 examples.

Integration is reasonably simple. Start by downloading a trial version of redactor. Switch to file view in your project.


Then add in the redactor javascript and css files like this:


Then edit the default.htm file which is found under the client project, and reference the above 2 files. You can insert the CSS reference just below the other CSS references, and the Javascript file just below the other scripts.

Build your screen

Change one of your fields to a textarea.


Then with that same field highlighted, modify the post render event using the ‘Write Code’ button. The code should look like this:

myapp.AddEditProfile.EmailSignature_postRender = function (element, contentItem) {
  // Convert the textarea to a html editor...

  // When the editor loses the focus, tell the change event to fire so Lightswitch recognises that the value needs saving...
  $(element).find(".redactor_editor").blur(function () {

Now run your application, and you should be presented with HTML editing for that particular field.

Note: the redactor control has a couple of glitches when being displayed on a dialog screen with the popup menus for links and colors…this doesn’t seem to affect anything if the screen is converted to a normal (non-dialog) one. This is shown below.


Best of luck. Let me know if you have success with other editors.



  1. Thanks heaps Michael

  2. Thanks for the article. Have you tried insertHtml method at cursor location?

    1. created a button to insert text
    2. $(“textarea”).insertHtml(“say hello”); the text always show up at the beginning

    Any ideas? Thanks in advance

    1. Hey Sid,

      No, I haven’t tried that, but that sounds more like a question for the vendor of the component.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: