You are hereEasy Page Editing with CKEditor and IMCE

Easy Page Editing with CKEditor and IMCE


Once you have a Drupal site up, it seems a little backwards to have to write HTML to make your pages. The way to solve this problem is generally called a WYSIWYG(What You See Is What You Get) editor. It makes it so you can basically write and edit text like it were something close to Microsoft Word. In particular, I’ll show you how to use my favorite one, CKEditor. Also in this tutorial, we’ll make it so you can easily upload images to a page without having to code them like you would by default.

You’ll need to know how to install modules by this point. If you don’t know how to yet, don’t worry! You can learn here.

CKEditor - Easy Text Editing

  1. Download and install(but don’t enable) the appropriate CKEditor module for your version of Drupal. You can find it here: CKEditor. Module installation instructions can be found here.
  2. Next, go to the proceeding link and downloand the .zip file for CKEditor. Once you’ve downloaded it, uncompress it.
  3. Open your FTP(?) client and log in. Navigate to /public_html/sites/default/modules/ckeditor/ckeditor
    Note: You’ll know you’re in the right spot when you see a file named ‘COPY HERE’
  4. Drag the uncompressed ckeditor folder onto public_html/sites/default/modules/ckeditor/ckeditor on your server.
  5. Log on to your website as the administrator
  6. Enable the ckeditor module make sure to go to example.com/update.php(where example.com is your website address). All you need now if image uploading functionality!

 

Easy Image Uploading

  1. First, you’ll want to download and install the IMCE module which can be found here: http://drupal.org/project/imce
  2. Next, go to your modules page and enable the IMCE  module. Then go to [your website]/update.php (Ex: MyExampleSite.com/update.php)
  3. Go to your administrator area, then click Configuration/Site Configuration
  4. Click CKEditor
  5. Click the ‘edit’ link next to the either profile under ‘Profiles’. Once you’ve done one, you’ll want to do the other profile as well.
  6. Expand the ‘File Browser Settings’ area, and change ‘File Browser’ to ‘IMCE’(See Picture)
  7. Click ‘Save’. This will take you back to the page where you can choose to edit a profile. Edit the remaining profile the same way you did the previous one.
  8. Done!

You’re all set! So what do you end up with? Make a page, and you’ll see!

You can type out text and edit it with the buttons above which is WAY easier than writing HTML(See Picture)

Plus…

 

Adding more buttons

  • You can add WAY more buttons and options by adding the code from this file to the ‘Toolbar’ section in Admin > Configuration > CKEditor > Edit a Profile > Editor Appearance [Drupal 7]
  • You can get the same effect much easier in Drupal 6 by going to Admin > Configuration > CKEditor > Edit a Profile > Editor Appearance, and chaning the ‘Toolbar’ setting to ‘Full’. [Drupal 6]

Uploading Images

You can upload and add pictures by:

  1. Clicking this button
  2. Then click ‘Browse Server’(See Picture)
  3. Click ‘Upload’, then ‘Browse’
  4. Click on the picture of your choice and hit ‘Open’. Then, click ‘Upload’ after selecting what thumbnails you want made(if any)(See Picture)
  5. Close the upload box
  6. Click on the file you uploaded and click ‘Insert File’

 

 

Newsletter Signup

Corrections? Feedback?

This site hosted on:

Contributing Member of the Official Drupal Association