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.
Image

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:

Image

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.

Image

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

Image

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.

Image

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.

Capture

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

About these ads

5 comments

  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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: