WordPress WYSIWYG Made Easy

What you see is not always what you get with WordPress.

WordPress WYSIWYG

  • Easily add site-wide WYSIWYG textareas
  • Beware the Internet Explorer trap
  • Download to avoid losing service
  • Configure options for best results

By default, the standard WordPress WYSIWYG editor is TinyMCE – but it is a non-standard implementation, and it is only used in new posts, not comments.

There are many plugins that extend both the functionality and application of TinyMCE. Life can get very complicated checking all the options, but I stopped looking when I road tested Front-end Editor. This uses the NicEdit WYSIWYG editor, which is very easy to implement.

I looked at the WP NicEdit plugin, but it is no longer supported. Anyway, I checked out the NicEdit site, and it only needs a couple of lines of code, so I just added them to my footer. Being short of time, I took the lazy option of linking direct to the NicEdit site, using the two lines of code on the NicEdit homepage, instead of installing on my own server. I regretted that, but it was easily fixed, with some interesting options, which I will explain soon.

First let me mention a terrible problem (with a praise-winning fix) I found when I tested in Internet Explorer instead of my faithful Firefox.

I was getting a good, consistent look and feel for contributors. Comment boxes, new post forms using TDO Mini Forms, and in-line editing using Front-end Editor, all picked up NicEdit. Looked great in Firefox, but when I tested in MSIE, the textarea box did not display properly, and the NicEdit interface was disabled. I got an error message:

Unknown runtime error
Line: 8
Char: 721

But this was impossible to decipher in the minimized nicEdit-latest.js on nicedit.com. Googling the problem showed me that someone else had raised it on the NicEdit forum, but there was no solution. I was about to give up and install my own copy that I could debug properly, when I saw the warning in the aforementioned WP NicEdit Installation notes (edited for clarity):

=Config to make it work in IE=

The default installation will work great with all non IE browsers. In IE6, the Rich text editor may not work by default. To make it work please follow following steps.

  1. Open the comments.php of your theme, using the WordPress Appearance Editor.
  2. Search for textarea. If it is wrapped with paragraph tags, remove them (<p> & <p>).
  3. Save the file.
  4. Congrats, it will work fine now.

And it did!

Delighted by the quick fix of removed paragraph tags, I left my NicEdit configured as before, which you will soon see, was not the best decision. In a small attempt to give something back, I reported my solution in the NicEdit forum, which has earned me at least one Brownie point. I just got a response:

shrewdies,

I love you, MAN!
You saved me at least 3 years of my life!

Removing

tags totally help with ie, thanks a lot!

Cheers,
Greg

Happy to help, Greg. 🙂

WordPress WYSIWYG Made Hard

All has gone well until yesterday. The nicedit.com server went down, and I was returned to plain textareas. I’d happened to notice when searching earlier that there seemed to be a mirror site, so I went in search of that. Sure enough, ns2.bkirchoff.com/nicedit.com/download.php was available and let me download the code for my own server. If you need this to get out of a hole, please note:

  • ns1 is also available – just replace ns2 with ns1 in the above URL.
  • When navigating that site, the links do not include the /nicedit.com/ subdirectory, so you will have to manually edit the URLs.
  • Be sure to load any plugins you need. I noticed a discussion referring to problems with the compressed download not including plugins, so I chose the uncompressed option, then minified my download.
  • You may need to edit the path to nicEditorIcons.gif

The script is working fine now, and I also made sure the installation code in my footer included the HTML edit button. Not all the allowed WordPress tags are covered by NicEdit (notably, blockquote), so HTML editing on top of the WYSIWYG editor is good. The footer code is:

<script type="text/javascript" src="yourInstallPath/nicEdit-min.js"></script> 
<script type="text/javascript">bkLib.onDomLoaded(function() { nicEditors.allTextAreas({fullPanel : true}) });</script>

Note that nicEdit-min.js is the name I gave my minified version – the standard is nicEdit.js.

5 thoughts on “WordPress WYSIWYG Made Easy

  1. vince jelenic

    curious, I see you’re not using nicEdit here now… broken again?

    so hard to believe no-one’s got a simple fix.. or if you know of one, drop me a pointer.. i’d love to use it on our site.

    cheers.

    1. Keith from shrewdies

      Hi vince,

      Thanks for pointing that out – I had forgotten that I’d turned nicEdit off here. My latest WYSIWYG WordPress article should explain all you need, and if not the next article will. If that still does not answer your questions, just ask.

      What are you trying to do beyond the WYSIWYG comments box at the bottom of your sitemap page?

  2. vince jelenic

    hi,
    installed and used nicedit… could not get beyond the problem with narrow window in IE.

    I’m using “pretty comments” plugin at the moment.
    The only thing sadly lacking is the ability to allow commenters to upload photos (nicedit used imageshack, pretty comments only allows URL placing).

    As per my previous note, i’m surprised no-one has actually “fixed” this and re-released an IE compatible version that works in all cases.

    If you know of any, i’m listening.
    cheers.

Comments are closed.