Read part 2 for adding visual editor to WordPress comments box using new editor API available in version 3.3
Writing HTML tags in comments is not easy for everyone. You can add visual editor/TinyMCE in comments box so that your site visitors can easily format text in bold, italic, etc.
You can add visual editor to comments form without a plugin. In your Theme’s functions.php file, add the following snippet:
add_action( 'comment_form_after', 'tinyMCE_comment_form' );
function tinyMCE_comment_form() {
?>
<script type="text/javascript" src="<?php echo includes_url( 'js/tinymce/tiny_mce.js' ); ?>"></script>;
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode: "specific_textareas",
language: "",
skin: "default",
theme_advanced_buttons1: 'bold, italic, underline, blockquote, strikethrough, bullist, numlist, undo, redo, link, unlink',
theme_advanced_buttons2: '',
theme_advanced_buttons3: '',
theme_advanced_buttons4: '',
elements: 'comment',
theme_advanced_toolbar_location : "top",
});
</script>
<?php
}
If you wish to disable link buttons then replace this code
theme_advanced_buttons1: 'bold, italic, underline, blockquote, strikethrough, bullist, numlist, undo, redo, link, unlink',
with
theme_advanced_buttons1: 'bold, italic, underline, blockquote, strikethrough, bullist, numlist, undo, redo',
Note: If you are using this snippet in default WordPress Theme then you will see that the TinyMCE buttons are distorted. You can fix the issue by adding the below CSS code in style.css file.
#respond table {
margin: 0;
padding: 0;
}
#respond table td {
padding: 0;
margin: 0;
}
After adding the snippet, the comments box should look like the below screenshot.
TinyMCE in WordPress comments form
This is exactly what I was looking for. Thank you so much for it. I couldn’t find a plugin that works as well as the script you’ve given here.
Quick question: Any way to make the comment box bigger?
Yes, it is possible to increase the height or width of the comment box. Use the following CSS declaration
#comment { height: 200px; }I’m not sure why I didn’t realize that myself, but I appreciate it.
thank you
Thanks for such a valuable article. But i want to ask how i can add upload image option too in editor??
Change this line to
to
.
You will also need to include the tinymce language files:
I love this little hack. I’m working on using it in my plugin. I had to add a few lines of code to get it to use the default text during mouseover of each of the buttons.
One question, I can’t seem to get it to work in the reply section of the comments. It works great for a new comment, however when clicking reply, the tinymce box seems to get “stuck”.
Have you had any experience with this?
Tinymce editors are rendered in iframes. Browsers reset/re-render the iframe if you move them. The alternative solution is to initialize the tinymce editor again (this will require extensive javscript coding).
The issues can be overcome by utilizing the new Editor API in WordPress 3.3. Check part 2 for the snippet.
[…] issues with implementation of Visual editor to WordPress comments box with the method explained in part 1. Some of the issues are:Difficulty in including tinyMCE language filesThe Visual editor does not […]