December 5th 2008

jQuery SimpleModal Plugin Version 1.2 with NicEdit WYSIWYG Editor

Update 06DEC08 0920MST: Updated demo and download with version 1.2.1 of the SimpleModal plugin.

Update 05DEC08 2100MST: Eric Martin just released version 1.2.1 with some bug fixes. I will update this demo tomorrow sometime with the changes.

With the release of Eric Martin’s version 1.2 of the SimpleModal jQuery Plugin, I wanted to take a look at the new code and changes. At the same time I decided to try out the NicEdit WYSIWYG editor that I found via 20 Excellent Free Rich-Text Editors from Webdesigner Depot.

For the demo I created a simple table with customer data. I then used the jQuery contextMenu plugin to call the SimpleModal popup pre-populated with the respective customer’s data. In my next post, I am going to show you how to actually send the fax.

Live Demo | Download (HTML, CSS, JavaScript)

Screenshot of End Product:

NicEditor in Simple Modal Dialog Image

Probably the biggest change to the SimpleModal plugin is automatic centering of the dialog which can be overridden. Along with bug fixes, Eric also changed the internal CSS classes used by the plugin and added additional options. Be sure to see his project page for more details.

Of the multiple editors in the Webdesigner Depot article, I was really interested in NicEdit. From the NicEdit web site:

NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser. NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

The editor is MIT licensed, and though not directly a jQuery plugin, I found it was easy to integrate and so far it seems everything is playing nice between jQuery and NicEdit. NicEdit provides its own DOM ready function, however I disregarded it and just used its hooks from within my jQuery code. I found that the editor didn’t like being initialized on a hidden textarea, so I ended up not adding the editor until the onShow event of the SimpleModal plugin. I also, removed it during SimpleModal’s onClose event. So far, I am very excited about NicEdit. I like its simplicity, cleanliness and light payload (the js for the version I am using is 32kb before minification which I think is pretty good for a rich text editor). Even the icons are a single CSS sprite.

jQuery (See download for full code, I tried to comment so you can quickly skim and figure out what is going on)

Be sure to checkout the demo and let me know what you think in the comments.