2009
07.21

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

Category: Uncategorized / Tags: no tag / Add Comment

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.

13 comments so far

Add Your Comment
  1. Jorre said: 2009.08.07 00:26

    Hi

    I’m trying to use you code. I’ve downloaded the latest version of NicEdit (all options selected and not compressed).

    I get a js error on line 608 ‘document.getElementById(…)’ is null or not an object
    Do you know what is causing this error?
    How can I solve this?

    Thanks in advance for you help!

    /* remove undwanted tags */
    newSnippet = newSnippet.replace(//gi,”);

    this.content = matchedHead + newSnippet + matchedTail;
    var preview = this.content.replace(//g, “>”);
    document.getElementById(’preview’).innerHTML = preview;
    this.ne.fireEvent(”set”,this);
    this.elm.innerHTML = this.content;

  2. jorre said: 2009.08.07 04:39

    Hi Billy

    I’ve commented out the lines concerning the preview element since this isn’t know in the rest of the code.

    Now your solution works fine for me in firefox. In IE 7 I notice that some tags are not removed (the closing span tag is still in the html code).

  3. admin said: 2009.08.10 08:10

    Jorre, thanks for that note. I had forgot to remove those lines out which I was using for testing/debugging purposes.

    I will upload the fixed .js file tonight.

  4. Jordan Mack said: 2009.09.01 14:21

    FYI, your modification breaks the instanceById method.

  5. Jordan Mack said: 2009.09.01 14:35

    I tracked it down to the following line:

    var editorElm = new bkElement(’DIV’).setAttributes({id : e.id}).setStyle({width : (newX-8)+’px’, margin: ‘4px’, minHeight : newY+’px’}).addClass(’main’).appendTo(this.editorContain);

    Because you are setting the div to the same element id as the text area, instanceById can’t locate the correct object anymore. This is also technically invalid HTML since no two elements should have the same id.

    To fix I change the line to the following:

    var editorElm = new bkElement(’DIV’).setStyle({width : (newX-8)+’px’, margin: ‘4px’, minHeight : newY+’px’}).addClass(’main’).appendTo(this.editorContain);

  6. lvsys said: 2009.09.06 20:24

    Hi Billy,

    Thanks for the good work, this is great. Thank you to the other contributors for the patches. Have you considered contacting the author of NicEdit for inclusion into his release?

  7. Jostein said: 2009.10.08 03:45

    After pasting, the cursor is gone… Any way to fix that?

  8. admin said: 2009.10.08 12:08

    Jostein,
    I have not found a way to put the cursor back after pasting. Unfortunately I don’t have time to work on this at the moment. Feel free to share any fixes you may come up with.

  9. admin said: 2009.10.08 12:28

    Jordan,

    Thanks for the fix. I will add it later, probably this weekend.

  10. Aaron said: 2009.11.01 01:55

    So cool. Glad to see people are still hacking on NicEdit. I’m using it in my next project.

  11. Nihad said: 2010.01.11 06:17

    Hey Billy thank you for this helpfull add-on

  12. RP said: 2010.01.20 02:32

    This was sooooo useful - Thanks so much!

  13. Nico said: 2010.03.03 09:29

    Thanks for your work. All users please not the comment from Jordan Mack above. With his change it worked fine for me.

Your Comment