How to replace the WP comment form with a WYSIWYG editor

You can replace the standard WordPress comment form with a built-in WYSIWYG editor TinyMCE.

Find the file where the comment form is defined. Usually it’s comment.php in your theme

For WP <3.0 it looks something like:



. . . <form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post"> . . . <textarea id="comment" cols="100%" rows="10" name="comment"> </textarea> <input id="submit" name="submit" type="submit" value="Submit Comment" tabindex="5" /> . . . </form> . . .

In WP3.0 a new function custom_form() (defined in wp-includes/comment-template.php) appeared.

Add the following before or after the form:

<script type=”text/javascript”
src=”<?php
echo (get_bloginfo(‘wpurl’));
?>/wp-includes/js/tinymce/tiny_mce.js”>
</script>
<script type=”text/javascript”>
tinyMCE.init({
theme : “advanced”,
mode : “textareas”,
plugins : “safari,autosave,media”,
languages: “en”,
theme_advanced_buttons1 : “bold,italic,underline,undo,redo,
link,unlink,image,forecolor,styleselect,
removeformat,cleanup,code,cite”,
theme_advanced_buttons2 : “”,
theme_advanced_buttons3 : “”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_styles : “Code=codeStyle;Quote=quoteStyle”,
entity_encoding : “raw”,
remove_linebreaks : false,
inline_styles : false,
convert_fonts_to_spans : false
});
</script>

For other options, see the TinyMCE documentation and examples: http://tinymce.moxiecode.com/examples/example_01.php

Also, you will need to copy the original tiny_mce/themes/advanced/langs directory from the TinyMCE distribution into wp-includes/js/tinymce/themes/advanced. Otherwise you will not get the correct menu labels.

Leave a Reply

Your email address will not be published. Required fields are marked *