Installing the CKEditor in Drupal 7

I had the opportunity to install Drupal 7 for the first time in a couple of years, and I was looking forward to re-acquainting myself with the latest from the Drupal community.  My last go round with Drupal was with Drupal 5, and I wanted to see what I missed.

Drupal front page with Admin panel at the top


The Drupal 7 installation was relatively painless.  It mimics most of the other CMSs and Frameworks out there on the way they load.  You create a directory in your home directory for the site.  You create a database for the Drupal 7 installation to populate.  Download and unzip Drupal 7.  I like to unzip it in a separate directory, and then copy the files to the server directory I created, just me.  Then you go to your browser and bring up the site.  Drupal 7 takes care of installing files to the directory and populating the database.

Once the install was finished the site came up in the new admin panel.   The above picture shows the site after a couple of modifications on my part.  Notice the new admin panel at the top of the screen, very nice.  Under the hood I found it to be the same old Drupal in the way the files are laid out.

The first thing you want to do when you install a CMS is start to put together a couple of pages and a menu to start to get acquainted.  If you go to "Content -> Add content -> Basic page".  You get a text box where you can enter HTML or text but that's it.

Initial Drupal7 Text Box Editor


Unfortunately, I want an editor when I create my pages, where I can change text size, highlight text, add links, and add pictures.  It simplifies, not having to hand code everything.  Drupal doesn't come with one, if I remember correctly, neither did Joomla.  Why is that?

Well, it turns out there are several good web editors that can easily be incorporated into your CMS.  The two that come to mind instantly are "TinyMCE" and "CKEditor".  I like both editors.  I can see why Drupal makes you install your own.  Why make a pick?  Isn't the market served better by having the two editors compete with one another.

Well, I'll pick.  I've used both editors in putting together web sites.  Both companies charge for their deluxe editor, and if you want to access images with a file server.  However, both companies have a free basic version, which is more than adequate.    The CKEditor used to be the FCKeditor.   I used the FCKeditor in the past and found it buggy.  During the time of the FCKeditor, I preferred, and installed mostly the TinyMCE editor.  Times change.  The old FCKeditor was rewritten to be object-oriented and renamed the CKEditor, which has been bug free since I've been using it.  I find the newer CKEditor easier to install and configure.  Right now, I prefer the CKEditor.

Let's get stared.  If you go to the CKEditor download page, you'll find that the CKEditor folks have taken the pain out of the Drupal and Joomla install by creating a version just for those CMS's.  Scan down the page, and download the CKEditor for Drupal, no brainer.  That's a 4Mb zip file that expands to 12Mb.  Copy the expanded directory and files to your Drupal installation's "sites/all/modules" directory.  You should end up with a "yoursite/sites/all/modules/ckeditor" directory full of files.

Now we need to turn it on.  In your new Drupal 7 admin panel at the top of the page, click on "Modules", scan down the page all the way at the bottom, and click the check box next to the CKEditor to enable it.  Save the configuration at the bottom.  Now go to the top menu and click on "Configuration," then scan down a bit and click on the "CKEditor".  Here, you'll find the User Guide, and Documentation, and a warning that this is an unlicensed version.  Ignore the warning, and create a profile by clicking the edit button under Profiles->Full->Basic Setup.  Give your profile a name and save it.  Here you can configure various editor settings.  The configuration is broken into various segments that you access by clicking on the segment title, like Basic Setup, Security, etc.  Configure later, let's move on and see if we're set up properly.

The CKEditor


Click on "Content->Add content->Basic Page" and wahlah, we have an editor.  That was pretty simple.  In the editor click on the little icon that looks like a picture, your image icon.  It's on top row next to the red flash icon.  You get an image loader, but where's the browse button?  There's no button to scan your files for your image file.  If you want to add pictures to your page, this is not useful.   You can spring for the CKFinder for $59, which is, of course, nicely integrated into the CKEditor, then your all set, not me.  There is an alternative.

No Browse Button


That alternative is a module called IMCE, found here.  Scan to the bottom of the page and download the file.  Unzip it into a directory, and then copy that directory and files to a nice snug spot next to your CKEditor directory at "yoursite/sites/all/modules/imce"  Same procedure, go to modules, and enable the IMCE module, save the configuration.

We need to link the CKEditor's picture icon to the IMCE file finder.  Go to "Configuration->CKEditor->edit the profile you just created.  Open the section "File Browser Settings."  Open each of the first three drop  downs and select "IMCE".  Yes, it was rather nice of the CKEditor folks to include this selection in their drop down. Click Save, and your done.

Let's see if anything changed.  Go to "Content->Add content->Basic Page" and click on the editor picture icon.  Wow, a browse button, click it.  Sometimes all the directories don't open.  You can click on "root" and other directories to open them.  But this is really not what we want.  What happen to our beloved directories?  How do we set the path?

The Browse Button


Initial Screen after clicking the Browse Button


First things first.  In case your wondering where "root" is, it's at "sites/default/files".  There's a picture directory where you can upload your pictures "sites/default/files/pictures", but again we want to see and browse our directories.  To get those, you're two clicks away.  Click on "Upload File" in the top menu, then browse and we're there, and your all set. Enjoy.

Finally the File Browser




Installing the CKEditor in Drupal 7 — 1 Comment

  1. You can also use the WYSIWYG module, which has built in support for CKEditor, FCKeditor, jWysiwyg, markItUp, NicEdit, openWYSIWYG, TinyMCE, Whizzywig, WYMeditor, and YUI editor.  The individual modules are much easier to use and administer, but wysiwyg gives you options to use particular modules for particular roles, and also to manage all editors in one place.  

    I’m on the fence, I bounce between liking the TinyMCE (although TinyMCE module isn’t available for D7, they recommend using wysiwyg) or CKEditor modules, and then flipping over to using WYSIWYG and installing the TinyMCE or CKEditor libraries.