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. At line 84, I simply comment out the string manipulation, and set the return value to the string that was passed in:
if ($multiline) {
// $html=preg_replace('/\r\n?/', "\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.
Tags: NicEdit, Question2Answer
) and progress notes. It saves cluttering up the blog, and sometimes what could be Draft or Private deserves to be seen. I made a note about Swift as part of another topic, mainly as a reminder to do the Swift review once I had finished the current project.
