A customized web-based wysiwyg that can clean a paste from MS Word

I few weeks ago I began a project developing a custom built content management system (CMS) for clients of the web development company I work for (cgCraft).  A key component of any CMS is the wysiwyg… that special text-box that web design clients want so they can control their own website content.

I began my search of existing web-based wysiwyg applications and found that the two leading applications (FCK and TinyMCE) are pretty good.  They have a lot of tools, but a big problem with them is that they can give your web design customers a little too much control over the content.  This can result in disasterous layout problems, horrible color combinations, and unwanted calls from frustrated non-tech-minded business owners.

What I needed was something simple and customizable and able to produce valid xhtml.  I came across a newer wysiwyg called NicEdit which is at version 0.9 r23.  It is highly customizable and feature rich, yet simple and clean in design and implementation.

However, none of these 3 editors could properly clean a paste from MS Word, which is something our web design clients love to do.

So I set out to solve this problem.  I chose to work with my favorite of the 3 editors, NicEdit, and then modified one of the classes to not only clean a paste from MS Word, but a paste from anywhere.

The Solution

  1. Go download NicEdit then open it up in your favorite text editor.  Get a demo working.
  2. Find the nicEditorInstance class.
  3. Replace the nicEditorInstance class with the code in this javascript file. DO NOT replace the entire nicEdit js file, only replace the nicEditorInstance class.
  4. Try it out!

Sorry… I’ll have a working demo up soon.

Other things to do.  If you’re like me, you want your clients to work with a pre-defined set of styles.  Check through the NicEdit docs, forums and examples and you’ll see it’s pretty easy to remove formatting buttons from the editor.  Also look through the MODIFIED class above and you should see how you can strip/include more html tags from a paste.

Good luck!  Send me any improvements or suggestions you find.