WYSIWYG WordPress Comments

I tried and tried to get the CKEditor plugin for WordPress to initalize multiple comment textareas for a custom post type I had created using the pods WordPress plugin.  No matter how hard I tried, I failed.  Only the first instance would get initialized.  I dug through the code and found where the instance was created, but even with the code in front of my eyes, I could not figure out how to adapt the messy PHP / Javascript mesh to do what I wanted.

Eventually, I came accross a great guide explaining how to use NicEdit, a simple WYSIWYG editor that can be used easily to replace the boring WordPress comment box with something more friendly for end users leaving comments.

Following this guide, I downloaded and uploaded the NicEdit files to a folder named "scripts" in my theme's directory (please adjust the path in the functions below if you want to use another directory or place the files elsewhere).  I would recommend downloading the non-compressed version, as the code is easier to read and making changes is a lot easier.  I inserted the following function into my WordPress theme's functions.php file:

function add_nicEdit() {
    if ( !is_admin() ) {
        // register scripts
        wp_register_script('nicEdit', get_stylesheet_directory_uri() . '/scripts/nicEdit.js', array(), false, true);
 
        // enqueue scripts
        wp_enqueue_script('nicEdit');
    }
}
 
add_action('wp_enqueue_scripts', 'add_nicEdit');

Then, I created a new function that I added to NicEdit.js file.  After this code:

allTextAreas : function(nicOptions) {
        var textareas = document.getElementsByTagName("textarea");
        for(var i=0;i<textareas.length;i++) {
            nicEditors.editors.push(new nicEditor(nicOptions).panelInstance(textareas[i]));
        }
        return nicEditors.editors;
    },

I added a function called allCommentTextAreas:

allCommentTextAreas : function(nicOptions) {
        var textareas = document.getElementsByTagName("textarea");
        for(var i=0;i<textareas.length;i++) {
      if(textareas[i].className == "comment_editor"){
               nicEditors.editors.push(new nicEditor(nicOptions).panelInstance(textareas[i]));
      }
        }
        return nicEditors.editors;
    },

The way this function works is that it will replace all textareas that have a class of "comment_editor" only.

Next, in my theme's footer.php file after the <?php wp_footer(); ?> line, I added the following:

<script type="text/javascript">
           // We need to initialize the WYSIWIG editor for the comments field                   bkLib.onDomLoaded(function() { nicEditors.allCommentTextAreas({
                   iconsPath : '<?php bloginfo( 'stylesheet_directory' ) ?>/scripts/nicEditorIcons.gif', buttonList : ['bold','italic','strikethrough','link','unlink','removeformat']})
                   });
        </script>

In your pods page template, load comments like this:

$args["comment_notes_after"] = "";
$args["comment_field"] = '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) .          
'</label><textarea id="comment" class="comment_editor" name="comment" cols="45" rows="8" aria-required="true">' .          
'</textarea></p>';
comment_form( $args, $post_id ); 

Your comments form will now look a lot better, specifically, they will look like this: