Submitted by admin on Mon, 09/16/2019 - 14:55

In this tutorial you will learn how to setup a CKEditor for your Drupal website + how to enable a few very neat modules - like IMCE for Image upload, Spell checker and Word count.

Since the beginning (almost since) I created my blog (http://www.softdecoder.com) I have been using TinyMCE text editor for creating and editing blog posts. But lately I have found that CKEditor might be somehow a bit better text editor for my blog. I'm not against TinyMCE, just CKEDITOR seems a bit better text editor.

What is CKEditor?

CKEditor is the far superior successor of FCKeditor. The editor has been rebranded and completely rewritten. It is now much faster (the code has been optimized), loads faster (the number of files has been reduced, so the browser will perform less HTTP requests) and developers friendly.

Why I like CKEditor?

I like it for it's many out of box features, you don't need to install a single additional library, just download CKEditor module, enable it, and fine tune it a little bit. All libraries are loaded from CDN.

The simplest way to have the editor running is to use CDN, to use it set: //cdn.ckeditor.com/4.4.3/full-all

How to install CKEditor for Drupal website

  • Download and install CKEditor to Drupal sites/all/modules folder and enable it from module page
  • Create a new text format (admin/config/content/formats/add) for example: CKEDITOR, assign it to authenticated user roles

Visit admin/config/content/ckeditor and under Profiles choose either Advanced or Full tab and enable CKEditor for text format you just created:

Image removed.

CKEDITOR PROFILES

Expand Basic Setup tab and check your text format

Image removed.

Ckeditor basic setup

Congratulations you have just enabled CKEditor text format for your Drupal website, next create new post, and change display to CKEDITOR text format

Image removed.

Switch to CKEDITOR text format

Image removed.

CKEditor WYSIWYG text editor

Optional - Enable IMCE to insert images into CKEditor text editor

If you are planing to insert images in your posts  - you should install IMCE module and under File Browser settings tab (admin/config/content/ckeditor/edit/Full) change File Browser type for Image Dialog Window to IMCE

Image removed.

CKEditor IMCE

Optional - Enable Spell checker for CKEditor text editor

Another neat feature you might want to enable is spell checker. Under Advanced Options tab (admin/config/content/ckeditor/edit/Full) check Yes under Spell checker

Image removed.

CKEditor spell checker 

Optional  - Display Word Count for CKEditor text editor

This is the feature I really enjoy - since I believe that the length of the post affects how Google ranks the post (the longer the better) - I'm always trying to write at least 500 word long posts

Under Editor Appearance tab (admin/config/content/ckeditor/edit/Full) scroll down to the Plugins section and enable Plugin to count symbols, symbols without blanks and words 

Image removed.

 

Solutions Img