How to add Ckeditor to WordPress Comment Form

There is a plugin named "Ckeditor With Jquery" which enables users to add CKeditor using jQuery. However, it did not work as expected and the Ckeditor version used in this plugin is 3.6.5.

I decided to add the latest version of CKeditor to my WordPress.

For this, I followed the following steps:

1. Download the ckeditor.zip file
2. Extract the ckeditor.zip file
3. Upload the files under the root directory (or any directory whatever you prefer) of the site
4. Edit the php files where the CKeditor plugin will be used

Download the ckeditor.zip file

You can just download the latest version from http://ckeditor.com/download.

However, I wanted to customize Ckeditor and download it from the builder page: http://ckeditor.com/builder. Most especially I wanted to use the feature to add "code snippets" in my comments system. I selected "Code Snippets" plugin. (Instead, you can select "syntaxhighlighter.")

Load js file and modify a php file where Ckeditor will be used

To use Ckeditor, you need to load "/ckeditor/ckeditor.js" file by adding the following script in the file where it will be added:

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

I added the full path of the "ckeditor.js" file. I also added the following script code at the end of the comments.php file along with the code above:

<script>

CKEDITOR.replace( 'comment' );
</script>

After adding the two code snippets into your "comments.php", please add the following function to your theme's function file ("functions.php):

add_filter( 'comment_form_field_comment', 'my_comment_form_field_comment' );

function my_comment_form_field_comment( $comment_field ) {

$comment_field = '<p class="comment-form-comment">' .
'<textarea id="comment" class="ckeditor" name="comment" cols="45" rows="8" aria-required="true"></textarea>' .
'</p>';
return $comment_field;
}

Please refer to this page for more information on how to configure Ckeditor.

How to make images (added through image URLs) be shown with Ckeditor

Now Ckeditor should work without problems. But I found some problems with it. For example, images are not showing in the final comments even though they are display properly in Ckeditor. I tried to find out the workaround to resolve this issue. Some problems related to Ckeditor can be resolved by running "stripslashes($_POST['content']);" on the content posted from CKEditor before inserting into the database. But this method did not work.

I finally found the reason: it's because img tag is not allowed by WordPress.

I located the kses.php in the /wp-includes/ folder  and put the following code under "$allowedtags = array" (I referred to this post to allow tags in WordPress):

'img' => array ('alt' => array (), 'align' => array (), 'border' => array (), 'height' => array (), 'hspace' => array (), 'longdesc' => array (), 'vspace' => array (), 'src' => array ()),
    'h1' => array(
   'align' => true,
  ),
  'h2' => array(
   'align' => true,
  ),
  'h3' => array(
   'align' => true,
  ),
  'pre' => array(
   'width' => true,
  ), 
    'ul' => array(
   'type' => true,
  ),
  'ol' => array(
   'start' => true,
   'type' => true,
  ),
    'li' => array(
   'align' => true,
   'value' => true,
  ),
  'table' => array(
   'align' => true,
   'bgcolor' => true,
   'border' => true,
   'cellpadding' => true,
   'cellspacing' => true,
   'dir' => true,
   'rules' => true,
   'summary' => true,
   'width' => true,
  ),
  'tbody' => array(
   'align' => true,
   'char' => true,
   'charoff' => true,
   'valign' => true,
  ),
  'td' => array(
   'abbr' => true,
   'align' => true,
   'axis' => true,
   'bgcolor' => true,
   'char' => true,
   'charoff' => true,
   'colspan' => true,
   'dir' => true,
   'headers' => true,
   'height' => true,
   'nowrap' => true,
   'rowspan' => true,
   'scope' => true,
   'valign' => true,
   'width' => true,
  ),
  'tfoot' => array(
   'align' => true,
   'char' => true,
   'charoff' => true,
   'valign' => true,
  ),
  'th' => array(
   'abbr' => true,
   'align' => true,
   'axis' => true,
   'bgcolor' => true,
   'char' => true,
   'charoff' => true,
   'colspan' => true,
   'headers' => true,
   'height' => true,
   'nowrap' => true,
   'rowspan' => true,
   'scope' => true,
   'valign' => true,
   'width' => true,
  ),
  'thead' => array(
   'align' => true,
   'char' => true,
   'charoff' => true,
   'valign' => true,
  ),
  'tr' => array(
   'align' => true,
   'bgcolor' => true,
   'char' => true,
   'charoff' => true,
   'valign' => true,
  ),

You can also add other tags. Now most features work as expected. (However, the highlighter feature still does not work but it works in a full skin (not a standard skin).)

I chose the "Office 2013" skin:

I love this skin. You can choose one from various skins. Moreover, now users can add "code snippets" in their comments. With this method, I can easily update this plugin easily by downloading the latest version.

According to the instructions, it should work without problems. However, I found many features do not work as expected.

Another method:

You can enqueue ckeditor.js and another js file containing the following code:

jQuery( document ).ready( function() {
jQuery( 'textarea#comment' ).ckeditor();
} );

You can get the same result. Even in this method, the same problems occur.

Note

• Use NicEdit, a Text and HTML editor, in WordPress