Published: Fri 13 Dec 2013

Tutorial: How to Install CKEditor with Drupal 7

Back in the good old days (circa 2008, Drupal 6.3) there was me. Me and my Drupal installations. And not much of a clue about anything. Then I thought, if only I had a WYSIWYG editor, my life would be complete. Then I tried to install one (TinyMCE specifically) and  lo!, my nightmares began in earnest.

These days, it's quite simple - in Who Wants to be a Millionaire terms ("it's only easy if you know the answer"). These days, I use CKEditor. Why? Well, it's going to be in core for Drupal 8, so I thought I might as well get used to it, but since making that decision a year ago, I find it a very pleasant editor to use. Then there was a damsel person in distress on Twitter wondering how to install it, so I thought "time to jump into character and save the poor soul".

@AgentCD are you sure? I've never paid for it. Can you send a link to it being premium. Perhaps I should write a blog post on installing it.

So, here goes.

  1. Download the CKEditor module for Drupal.
    1. This gives you a Drupal module to power the CKEditor WYSIWYG - it is NOT the editor itself, merely a bridge to it.
  2. Download CKEditor library from CKEditor.com.
    1. Extract the .zip folder you get from this.
    2. This is the editor itself. You need the Drupal module from 1 above to act as a bridge to this.
  3. Download the Libraries module for Drupal.
  4. In your sites/all/libraries module, drop in the CKEditor folder that you have downloaded from CKEditor.com, so you should have sites/all/libraries/ckeditor
  5. Enable the CKEditor and Libraries modules in your Drupal installation on your modules page.
  6. Take a bow. That should do it, now you can go to admin/config/content/ckeditor on your website and start playing with your sexy new WYSIWYG.

If you like what I write, you might like to follow me on Twitter @markconroy

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.