Tag Archives: NicEdit

The NicEdit WordPress Blog. Where WordPress gets WYSIWYG everywhere. NicEdit is a great free PHP library that makes front end editing a delight. Whether you just want to make comment editing more fun, or if you want a consistent WYSIWYG throughout your WordPress frontend, NicEdit is a cheap solution that is easy to manage.

Best WordPress WYSIWYG Editor

When I explained how NicEdit has become my personal best WordPress WYSIWYG editor, I mentioned some issues.

Whilst the best solution would be to delve into the NicEdit code, and change the parts that present problems, I have found workarounds that mean I can get by without this for now.

In fact, I am not certain if this is truly a NicEdit issue, or the way WordPress builds it’s comments forms. I’ll leave the strict coding debate until I’ve fully investigated why it works in FireFox but not in MicroSoft Internet Explorer (MSIE).

In my first investigation I explained how wrapping elements in HTML Paragraph tags will break NicEdit under MSIE. The symptom is a small disabled NicEdit toolbar that renders it useless. I explained in that article about modifying the comments.php to remove the paragraph tags (or change them to DIV tags) re-enabled NicEdit. However, WordPress 3 has changed the way the comments form is built.

The good news is that there is no need to hack the WordPress core that serves the form. All that is needed is a simple change to the way the comments form is called in your theme.

Restore NicEdit As Your MSIE WordPress WYSIWYG Editor

If you are using a pre-WordPress 3 theme, your comments form is built directly in comments.php. Current themes replace many lines of code with a simple call to a new function – comment_form().

This is much tidier, but the default settings are very NicEdit unfriendly. Not only does it retain the MSIE-breaking paragraph tags, but default width settings do not get passed to MSIE at the toolbar rendering stage.

Additionally, the default form displays the allowed HTML tags. This is something very dear to my heart in a normal comments textarea. Visitors should be told which tags are allowed to save those frustrating times when you type a long and interesting comment, only to see it posted as garbled rubbish because the pre or code tags are not allowed. With NicEdit, such vital information is unnecessary, as the tags are all processed before the code is saved, and you can even configure which buttons are available.

So how do we get the comments form to display NicEdit properly?

The call to comment_form() is near the end of comments.php in the theme editor area. If you are not happy with editing themes, get in touch with the theme author and ask them to add comment form parameters in the theme options. Or if the theme is not supported, then let me know, and I’ll produce a NicEdit enabled version of it.

If you cannot find comment_form() then chances are that you have an older theme, in which case search for the textarea line, and adapt the following.

The comment_form() function allows most aspects of the comment form to be changed by passing an array of parameters. More details are in the WordPress codex, but all you need to do is paste the following between the brackets() of the comment_form function:

array('comment_field'=>'<div class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" style="width:350px" rows="8" aria-required="true"></textarea></div>','comment_notes_after'  => 'Thank you.')

This simply changes 2 settings, comment_field and comment_notes_after by slightly changing the default WordPress code. I’ve cheated a little by including an inline style statement – my site is about getting things done quickly, and then we can argue with the purists to find more elegantly coded solutions. The important thing is that the following 3 NicEdit defeating issues are overcome:

  1. p is replaced with div to prevent MSIE “Unknown runtime error Line: 8 Char: 721”
  2. cols=”45″ is replaced with a width setting. Alternatively, you could probably set this in the style sheet, but I have not tested this.
  3. The allowed tags are replaced with a simple ‘Thank you’ message. You could change this to something else, or just the quotes to remove it entirely.

Change Defaults To Make NicEdit Your Best WordPress WYSIWYG Editor

In my previous article I explained the quick way to enable NicEdit to be your editor for WordPress comments or Question2Answer questions, answers and comments. Posting the default code certainly works, but you are at risk of losing the editor if the NicEdit site is unavailable.

The first thing you should do is copy NicEdit to your own server, and amend the first NicEdit line in your header.php to:

<script src="path-to-your-nicedit/nicEdit.js" type="text/javascript"></script>

If you like to keep images in a separate folder from js files, you will also need to change the NicEdit defaults. You will probably need to do this anyway to change the default buttons and add extra features. So, amend the second NicEdit line to:

<script type="text/javascript">bkLib.onDomLoaded(function() {nicEditors.allTextAreas({iconsPath : 'path-to-your-nicedit/nicEditorIcons.gif'})});</script>

In this instance we are only changing the iconsPath, but any nicEdit parameters can be amended in a comma separated list.

If you’ve implemented these improvements and still have unresolved issues, please let me know below. As I mentioned earlier, I will soon publish complete step-by-step guides for NicEdit enabling Question2Answer and WordPress, combined and in isolation. I’d appreciate your help in making it as complete as possible by clarifying any issues you may still have.

WordPress Default WYSIWYG Editor

My search for the perfect WordPress Default WYSIWYG editor is far from over, but at least I have a stable solution that works.

I’ve switched between NicEdit and TinyMCE for a few months. I like the simplicity of NicEdit, and had it working nicely on WordPress sites.

Then all sorts of weirdness started happening when I tried the beta of Q2A on a development site. I’d taken what I thought were sensible precautions. The site in question was new and had no visitors. I prefer to experiment with this sort of site if possible, as running development sites under localhost on my PC is not always a good representation of the real world. I had an absolute nightmare with this, and suspected all the new stuff I was trying out (beta Q2A and beta WordPress 3.0!)

Turned out it was nothing to do with the beta software, and everything to do with lousy server configuration backed up by lousy tech support from Bl** Host.

In the process of trying to get back to something that worked, I tried different settings on this site. I didn’t realize that I’d left WYSIWYG turned off here until vince told me.

For now, I’ve left tinyMCE alone. It looked like a good solution, but there are a whole bunch of formatting issues, so I’ve decided to focus on NicEdit.

I use it to make WordPress commenting better, and for Q2A. Within those setups (either of Q2A, WP, or both) there are installation and configuration options, so I’ll try to cover all the permutations.

Preparing Q2A

Q2A strips out any html code from multi-line text, so we have to tweak it. If you are uncomfortable with tweaking code, raise the issue on the Q2A site, and ask for an Admin option to disable it.

We have to edit the qa_html() function in qa-base.php, which sits in the qa-include folder. Find (Ctrl-F) qa_html, and you should see lines similar to those below. They change $html, but we want it to stay as entered. I simply comment out the string manipulation, and set the return value to the string that was passed in:
if ($multiline) {
// $html=preg_replace('/rn?/', "n", $html);
// $html=preg_replace('/(?<=s) /', ' ', $html);
// $html=str_replace("t", '    ', $html);
// $html=nl2br($html);
$html=$string;
}

If you do not do this, NicEdit will still work, but the HTML tags will get stripped before your questions, answers, or comments get saved.

This change will need to be reapplied whenever you upgrade or reinstall Q2A.

WYSIWYG Question2Answer

The simplest implementation is to copy the from NicEdit front page:

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

Then paste it into the Question2Answer Admin area. All you do is go to the Layout settings, and paste the above code into the ‘Custom HTML in <HEAD> section of every page:’ and save the settings.

You should see that all your multi-line text boxes have a WYSIWYG display with edit buttons across the top. The buttons are disabled until you click into the textarea.

Now check that NicEdit works OK on your question, answer and comment boxes. The easiest way is to edit existing items.

This has worked successfully every time I have tried it, but there may be some formatting issues on some browsers. I will cover these in my next article.

WordPress Default WYSIWYG Editor

For most of my sites, I want both WYSIWYG for Question2Answer and for WordPress. I always wrap my Q2A theme inside the WordPress theme, so it makes sense to apply NicEdit to the WordPress header. In this setup, you do not have to also apply it to NicEdit, unless you want different editor configurations in each area.

So to make NicEdit the WordPress Default WYSIWYG Editor and also apply it to Question2Answer, simply post the NicEdit code into header.php within the HEAD tags. This also applies if you just use WordPress without Question2Answer.

Test your comments both at the article level, and (if you use threaded comments) the reply to comment level. NicEdit should work nicely, but there may be issues in some browsers. You really need to try as many browsers as possible, but certainly common ones that your visitors use. See your server logs or analytics program – Google Analytics is very good – to get a list of browsers that your visitors use.

In my next article, I will look at some of the issues that WordPress themes can cause, especially with MSIE. I’ll explain how to overcome these issues, and approaches to investigating problems. I will also explain how to avoid the pitfalls associated with simply pasting the NicEdit code from their site. You will see how to create the best WordPress WYSIWYG editor.

You might notice that I do not use the NicEdit/WordPress default WYSIWYG editor that I have described on this site. That is because I intend to move all the interactive features to a separate site, and add more discussion and feedback tools. When I’ve done that, I will produce a complete step-by-step guide for integrating NicEdit and Question2Answer under a WordPress theme.

Let me know if you want to see it in action before you commit to these changes, and I will show you sites where it works so that you can see the improved front end.

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. Continue reading