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...
  $(element).find("textarea").redactor();

  // 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 () {
     $("textarea").trigger("change");
});
};

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.