Create Digital Media

For the Masses: WYSIWYG Comments for Wordpress

By jaymis

Peter and I have been talking about implementing WYSIWYG editing for Wordpress comments for a while now. WP’s comments system is reasonably robust, but the HTML instructions seem to confuse some people:

XHTML: You can use these tags: <a href=”" title=”"> <abbr title=”"> <acronym title=”"> <b> <blockquote cite=”"> <cite> <code> <del datetime=”"> <em> <i> <q cite=”"> <strike> <strong>

We quite often receive comments to out sites in which people - probably those unfamiliar with HTML - have taken these instructions to heart and created comments which look a little like this:

You can check it out <a href=”http://example.com” title=”here”>, more updates should be coming soon.

This can cause issues for the site as a whole: Wordpress doesn’t detect this error and close that anchor tag, so the rest of the comment becomes a link, which encompasses everything down the page until the next link in the code is closed. The same kind of thing happens when people put unclosed <strong> tags in their comments. We don’t have any closing </strong> tags in the page source after the comments, so when someone does this the rest of the site becomes emboldened until an administrator corrects the comment.

These kind of errors notwithstanding, WYSIWYG is perfect for comments. I don’t like WYSIWYG editors making decisions for me in my day-to-day coding life, as they rarely output exactly what I want them to, but writing comments is such a constrained activity; with a small number of tags available, the editor can’t really stuff things up too badly.

I’ve previously hacked a cut-down version of TinyMCE into our test bbPress installation. This was relatively simple, so I’d expected that it wouldn’t be hard to get it happening on the Wordpress comments form as well. I did a quick search first, though, to make sure I wouldn’t be duplicating someone else’s efforts. It turns out I would be, as there’s a Wordpress plugin called TinyMCEComments.

This plugin is great, but I think the default settings leave out an important functionality: blockquote. Commenting is about discussion and communication, and discussion often requires quoting to help clarity. TinyMCEComments does allow you to add additional buttons through an admin screen, but they show up at the right hand side of the toolbar. This might be ok - most commenters don’t really bother with blockquoting - but by default carriage returns in the WYSIWYG are converted into <br /> tags, and hitting blockquote then encompasses the entire comment.

So to get everything working happily, we also need to change the default from forcing line breaks to paragraphs. Here’s the changes we ended up making:
Line 218 - add “blockquote,” after “underline,”.

theme_advanced_buttons1 : "bold,italic,underline,blockquote,separator,strikethrough,undo,redo,link,unlink“,

Lines 219-220 - reverse the force newlines options, so it’s forcing p, not br.

force_p_newlines : true,
force_br_newlines : false,

And now it’s working beautifully, as you can see below.