TinyMCE editor in the comments section

To start, we just need to add the following fragment of code:

function gk_comment_form( $fields ) {
    ob_start();
    wp_editor( '', 'comment', array( 'teeny' => true ));
    $fields['comment_field'] = ob_get_clean();
    return $fields;
}
add_filter( 'comment_form_defaults', 'gk_comment_form' );

As you can see, we use the commentformdefaults filter as well as the function to catch the output in PHP. As a result, we are able to replace the standard field with the content of the TinyMCE comment editor.

Another important thing is the use of TinyMCE’s teeny mode. This mode allows you to display a simplified version of the editor.

Of course, the code presented above is a very basic configuration, which will display the editor in its base form, as shown below:

As you can see we will need a few amendments to make the editor look more presentable and functional. Let's start with the size of the editor - by default it displays 10 lines for the text-editing area, as seen in the screenshot above; this is too much for most people. Thankfully, we need only change the wp_editor function to the following:

wp_editor( '', 'comment', array(
'teeny' => true,
'textarea_rows' => 5
));

To reduce the number of text lines to 5 using the textarea_rows option. Thanks to this changed, the editor looks much better:

Another issue is the ability for users to insert images - most often we won’t want our users to take up too much space on the server with unnecessary additional resources, so it’s worth disabling the button for adding media - to do this we may use the media_buttons option:

wp_editor( '', 'comment', array(
'teeny' => true,
'textarea_rows' => 5,
'media_buttons' => false
));

Our editor is already starting to look quite neat once this item is removed:

There is a small visual issue here - one of the icons does not fit with the width of the comments area - so you’ll have to throw away the least needed button - personally I would remove the button that adds the strikethrough to the text; to do this we’ll use the mceteenybuttons filter and remove the fifth button from the list:

add_filter( 'teeny_mce_buttons', 'gk_comment_form_no_strikethrough');
function gk_comment_form_no_strikethrough($buttons) {
	unset($buttons[4]);
	return $buttons;
}

Thanks to the above modifications, our editor now looks neat and tidy and takes up the minimal space:

There remains one more addition - fullscreen mode, which by default looks like this:

We may also use Distarction Free Writing mode by adding another option - dfw:

wp_editor( '', 'comment', array(
'teeny' => true,
'textarea_rows' => 5,
'media_buttons' => false,
'dfw' => true
));

Which makes the full-screen mode look and feel slightly better, at least in my opinion!

It has a visible way to return to the normal editing mode, unlike the standard full-screen mode, which can reduce confusion.

Finally, if we wanted to reduce the size of the editor even further we could remove the tab with the choice between WYSIWYG mode and text - for this purpose we may use the option quicktags:

wp_editor( '', 'comment', array(
'teeny' => true,
'textarea_rows' => 5,
'media_buttons' => false,
'dfw' => true,
'quicktags' => false
));

The result is the most stripped-down version of the WYSIWYG editor possible in the comments: