WWG Casual PC Gamer

If you’re not a sister GeekGirl, you’re probably not going to be interested in this post, so I’ll spare you by placing the code hacks under the cut of this post. If, however, you are using WordPress blogging software, and you’re interested in having a fully customizable WYSIWYG rich text editor for your visitors to use when they leave comments, please do

Welcome, fellow geek! *much luv* I suppose I should start from the beginning for those of you that haven’t heard of NicEdit, so I’ll quote directly from their site:

NicEdit is a Javascript/AJAX inline content editor to allow easy editing of web site content on the fly in the browser. It integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

Using this cool little java script on your WordPress blog is really easy! All you have to do is add a couple of lines of script code to your theme’s header.php page, and you’re done. I’ve chosen to use the script as it’s served off the NicEdit servers because I won’t have to update it as they make changes that way… but they do offer the script elements in a zip file, if you choose to host the script on your own servers.

The only problem with the really simple script code they give you is that, as a default, it will effect every textarea form element on your blog. This means that all your comment input areas, as well as any contact form textareas will be converted to the NicEdit WYSIWYG editor. This is where I ran into a bit of trouble.

Using the script code in it’s default format, completely destroyed the cforms II plugin output on my contact page. Luckily, they do offer some code snippet changes on the NicEdit site, in the event that you need to customize your editor use like I did.

Admittedly, I am a completely self taught web geekgirl, so it took some trial and error, coffee, and a few smokes to figure out how to exclude the contact form from the NicEdit effect. Then of course, once I saw all the display options for the WYSIWYG editor, I had to change that too. LOL

I’ve outlined the necessary steps to customizing your usage of the NicEdit script below. I’m hoping to save a coding newbie the trouble of puzzling this out for themselves, the way I had to. Hope this helps!

Adding the NicEdit java script code to your WordPress blog so that it only effects your comment textarea

The code supplied by NicEdit defaults to effecting every textarea on the page that you place the script on. Since your comment textareas in WordPress can be found on all your single post pages (single.php), and your pages (page.php)… it’s easiest just to add the javascript code to your header.php file so that it effects all your comment forms site wide.

The problem with using the header.php file is that the NicEdit JS would then also effect any textarea on your blog. If you use a contact form, this is an issue… so you need to tell the JS to only apply the NicEdit effect to your comments textareas. To do this, use this code (remember that this example uses the JS served off the NicEdit server):

View the code here
note: using the code tag in a post when you have NicEdit running isn’t an option

Place the code above into your header.php file… anywhere will do, but out of habit, I placed mine before the /head tag. Upload your edited header.php file to your theme’s directory and you will notice the new NicEdit editor on all your comment textareas… but any other textarea on your site will be uneffected! Yay!

Now, if you’re like me and must have all the toys with all the possible options available, you’ll want to offer your visitors a “fully loaded” text editor! LOL To do that, use this code:

View the code here
note: using the code tag in a post when you have NicEdit running isn’t an option

There you have it… all in an effort to encourage your visitors to comment on your blog! LOL Try out my customized version of the NicEdit WYSIWYG editor by commenting on this post… especially if you found it helpful! Thanks!

ETA: After all this hacking, I just found a WordPress plugin that essentially does the same thing (applying the NicEdit script to ONLY your comment textareas). I have no idea if it’s updated to work with WordPress version 2.3.3, but you can check it out here. It looks like he’s customized the edit buttons that are displayed too. If you try the plugin, let me know how it works for ya (comment please LOL).