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:

WordPress and TinyMCE

TinyMCE (platform independent web based Javascript HTML WYSIWYG editor) is developed by Moxiecode Systems AB.

Update wp-includes/js/tinymce with files from tinymce/jscripts/tiny_mce

3d party TinyMCE plugins can be downloaded from SourceForge and should be placed in wp-includes/js/tinymce/plugins

To activate plugins and/or tune TinyMCE edit wp-includes/js/tinymce/tiny_mce_config.php (do not forget to make a backup copy first).

To add/remove plugins change $plugins variable. By default (wp2.6) it’s set to:

$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen' , 'wpeditimage');

If you use full version of TinyMCE (e.g. downloaded from Moxiecode) instead of the bundled one, this string may look like (see Plugins reference):

$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen', 'advhr', 'advimage', 'advlink', 'emotions', 'inlinepopups', 'insertdatetime', 'layer', 'nonbreaking', 'pagebreak', 'preview', 'searchreplace', 'style', 'table', 'visualchars', 'xhtmlxtras' , 'wpeditimage');

To add buttons to 4 available rows modify corresponding variables $mce_buttons, $mce_buttons_2, $mce_buttons_3 and $mce_buttons_4 (see Control reference). For example:

$mce_buttons = apply_filters('mce_buttons', array('search', 'replace', 'bold', 'italic', 'strikethrough',  'underline', '|', 'bullist', 'numlist', 'blockquote', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', '|', 'link', 'unlink', 'image', 'wp_more', 'pagebreak',  'spellchecker', 'fullscreen', 'table', 'wp_adv' ));

$mce_buttons_2 = apply_filters('mce_buttons_2', array('formatselect', 'code', 'forecolor', '|', 'pastetext', 'pasteword', 'removeformat', '|', 'media', 'charmap', '|', 'outdent', 'indent', '|', 'undo', 'redo', 'wp_help', 'advhr', 'emotions', 'insertdate', 'inserttime', 'preview' ));

$mce_buttons_3 = apply_filters('mce_buttons_3', array('fontselect', 'fontsizeselect', 'fullpage'));

The result can be viewed in a browser:

Note: AdBlock Plus Firefox extension blocks the contents of the TinyMCE popups (you will see empty pop-up windows).  You might consider replacing ABP with Adblock or whitelisting your whole site.

WordPress 2.5

WordPress 2.5 has been released! Installed! And? Does it work? Basically yes. But…

TinyMCE pop-ups are blank in Firefox. This is what I found (similar problems):

The Console shows:

Error: tinyMCE.getWindowArg is not a function
Source: http://.../wp/wp-includes/js/tinymce/tiny_mce_popup.js
Line: 53

Error: tinyMCE.getParam is not a function
Source: http://.../wp/wp-includes/js/tinymce/utils/form_utils.js
Line: 10

Error: tinyMCEPopup.requireLangPack is not a function
Source: http://.../wp/wp-includes/js/tinymce/plugins/advimage/js/image.js
Line: 5

Upgrading TinyMCE to v3.0.5 did not help (see this post on how to do that). Neither did the replacing inline pop-ups with real pop-up windows. The content is empty. However, TinyMCE works fine on the Moxiecode example page and locally using the example files. Hence, it’s not the code but the configuration or the method WordPress initializes TinyMCE (tiny_mce_config.php ?)

Update 2008-03-31 @13:48:24 Disabling compression (‘compress’ => false) and/or caching (‘disk_cache’ => false) in tiny_mce_config.php did not help. The WP cache (wp/wp-content/uploads/js_cache) was cleaned manually.