Drupal7: Installation of Ckeditor and its integration with some important modules and plugins.

Ckeditor is one of the most popular WYSIWYG text editors used with drupal. In this tutorial we will describe installation of ckeditor, and its integration with some important plugins & modules (like IMCE, codesnippet). We will also share various issues we had to deal with during this integration process. 


Ckeditor installation.

Download the Ckeditor from https://www.drupal.org/project/ckeditor (For this tutorial I have used the version 7.x-1.17) and place it in "sites/all/modules" folder.  Visit the page "admin/modules" and enable the CkEditor.

IMCE.

IMCE is an image/file uploader that can integrated with Ckeditor. Download it and enable it (For this tutorial I have used the version 7.x-1.10).  Now go and configure the Ckeditor by visiting the page         "admin/config/content/ckeditor".  Go to "File browser settings" of a given profile and change the "File browser type" to IMCE.

drupal Ckeditor file browser settings
Fig1

 

With successful integration you should be able browse and insert image into the content.

 

Ckeditor IMCE browse an insert image

 

Also you can upload your local files into the server.

 

Ckeditor IMCE file upload

 

IMCE Mkdir.

Using IMCE  you can upload a file into a target directory that is already available in the server. What if you want to create a directory dynamically on the fly ? You can use this module for creating directories on the server. This is a very useful feature for efficient organization of the content. Download "IMCE Mkdir"  (7.x-1.0) and enable it. You can notice a new button called "Directory" being added to the toolbar. Using this you can create sub directories under root directory.

IMCE Uploader 

Using IMCE you can upload a single file at a time. Sometimes it is very annoying if you want to upload large number of files. The module "IMCE Uploader"  (7.x-1.3) solves this problem. Down load it and enabled it. For this module to work properly, you need to perform couple more tasks.

1. Install plupload integration module.

Download this module from 7.x-1.7 and enable it.

2. Install plupload libraries.

Download the libraries from https://github.com/moxiecode/plupload/archive/v1.5.8.zip, rename it to "plupload" and place it "sites/all/libraries". When you visit the page "admin/reports/status" you should not see any errors/warnings related plupload  installation. Now go and configure "IMCE" (admin/config/media/imce/profile/edit/1) to set File Uploader to "plupload".

3. Update JQuery version to 1.8 or later, without this you may end up seeing an empty IMCE toolbar while uploading an Image.

Code Snippet  plugin integration.

Download codesnippet plugin from http://ckeditor.com/addon/codesnippet and place it in "ckeditor/plugins",  also download its dependencies (widget and dialog) and place them in the same folder. Now go and configure the Ckeditor to enable the codesnippet, widget and dialog plugins.

Ckeditor enable plugins

 

After this you should see the code snippet button   appearing on the Ckeditor toolbar. If  not try the following patch, it worked for me.

https://www.drupal.org/files/issues/ckeditor-fix-codesnippet-missing-but...

diff --git a/includes/ckeditor.admin.inc b/includes/ckeditor.admin.inc
index f9f84a4..ea99a4c 100644
--- a/includes/ckeditor.admin.inc
+++ b/includes/ckeditor.admin.inc
@@ -1761,6 +1761,7 @@ function ckeditor_toolbar_buttons_all() {
     'Unlink' => array('name' => 'Unlink', 'icon' => $path . '/images/buttons/unlink.png', 'title' => 'Unlink', 'row' => 2),
     'Anchor' => array('name' => 'Anchor', 'icon' => $path . '/images/buttons/anchor.png', 'title' => 'Anchor', 'row' => 2),
     'Image' => array('name' => 'Image', 'icon' => $path . '/images/buttons/image.png', 'title' => 'Image', 'row' => 2),
+    'CodeSnippet' => array('name' => 'CodeSnippet', 'icon' => $path . '/images/buttons/codesnippet.png', 'title' => 'Code Snippet', 'row' => 2),
     'Flash' => array('name' => 'Flash', 'icon' => $path . '/images/buttons/flash.png', 'title' => 'Flash', 'row' => 2),
     'Table' => array('name' => 'Table', 'icon' => $path . '/images/buttons/table.png', 'title' => 'Table', 'row' => 2),
     'HorizontalRule' => array('name' => 'HorizontalRule', 'icon' => $path . '/images/buttons/horizontalrule.png', 'title' => 'Insert Horizontal Line', 'row' => 2),

Gehsi filter.

Just enabling code snippet plugin is not enough to Hightlight the syntax of the code. You just need couple more modules, follow the steps given bellow for enabling syntax high lighting.

1. Install "Libraries" module 7.x-2.3

2. Down Load GEHSI library and place it in "sites/all/libraries" (https://sourceforge.net/projects/geshi/files/latest/download).

3. Download GEHSI filter module from 7.x-1.2 and enable it.

4.  Download Highhlight js module from 7.x-1.2 and enable it and its dependencies (High light js library https://highlightjs.org/). Down load the library and place it's contents under "sites/all/libraris/highlightjs".