WordPress WYSIWYG Made Easy

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.

Tags: NicEdit, WordPress WYSIWYG