How to setup CKEditor with IMCE

One of the most important part of a CMS is the content editor. In this tutorial, we will show to setup CKEditor for this task and IMCE for handling file uploads.

 

 

 

CKEditor is a WYSIWYG editor. It is the most popular and widely-used editor for Drupal. 

Requirements:

CKEditor-module (this tutorial uses 7.x-1.3)
IMCE-module (this tutorial uses 7.x-1.4)
Latest CKEditor (this tutorial uses 3.6.2)

 

Installation:

  1. Download CKEditor- and IMCE-modules and extract them to your modules folder (sites/all/modules or sites/yoursite.com/modules).
  2. Go to yoursite.com/admin/modules and enable CKEditor- and IMCE-modules.
  3. Download latest CKEditor from ckeditor.com. Depending on where you extracted the CKEditor-module earlier, extract CKEditor so that ckeditor.js and rest of the files can be found in ckeditor/ckeditor/ckeditor/. (For example: sites/all/modules/ckeditor/ckeditor/ckeditor/ckeditor.js)
  4. Go to yoursite.com/admin/config/content/ckeditor . Choose either Advanced or Full profile and click "edit".
  5. Under Basic Setup, check the input formats you want to use this editor in.
  6. Under File browser settings, choose IMCE in File browser type (Link dialog).
  7. Click Save.

 

Installation is now complete! Now when you create new content, there should be CKEditor showing on the Body-field.

Also, if you add images in your CKEditor and click Browse Server-button, this will open a IMCE that handles image uploading and resizing. IMCE also works with other file formats, when you add a link to the site.

Comments

amine's picture
Tue, 03/31/2015 - 16:08

Thank you, work for me

Hi Kristian,
thanks for the easy and comprehensive explanation - now it works finally, and it took me just 10 minutes!
BG
Jörg

Wellington da Torrejais da Silva's picture
Wellington da T...
Thu, 05/10/2018 - 18:02

Thanks!

Add new comment