Using the CodeIgniter framework to support image file uploads from CKEditor’s UI, your controller action must deal with the unorthodox situation where PHP global variables $_POST and $_GET are used. The file upload is handled as a normal PHP operation and then a unique JavaScript callback function is output for the CKEditor instance. This is made more difficult if you have SEO-friendly URI segments enabled in your CodeIgniter configuration.

config/config.php

Integrate CKEditor with CodeIgniter

  • Download CKEditor and extract to your project. In this example, I’ve unzipped to /assets/js/ckeditor/
  • Copy ckeditor_helper.php to /system/helpers/ of your CodeIgniter installation (/system/controllers/helpers/ for 1.7.2 or older.) The author’s web site is now defunct but there’s a reference page CKEditor for CodeIgniter in EllisLab’s wiki.

Implement Image Uploads

I’m presenting a barebones homebrew solution here, however you should look into the File Uploading Class offered by CodeIgniter’s library. For a more advanced cloud solution like Amazon E3, read about KnpLabs’ Gaufrette.

/application/models/FileUploader.php

/application/models/LocalFileUploader.php

Generate CKEditor Callback Upon Upload

The CodeIgniter controller will have three operations:

  • ckeditor-form/index, view the form
  • ckeditor-form/save, POST submit the form’s textarea HTML and persist to a database, etc.
  • ckeditor-form/upload, send a file to the HTTP server and auto-insert its new URL to a CKEditor instance in the form

Operations at the top of the upload() action method highlight how to retrieve GET parameters when PHP’s global variable $_GET has been cleared by CodeIgniter.

/application/controllers/ckeditor-form.php

The ckeditor helper function called in the below view was loaded in the setupCKEditor() method invoked above.

/application/views/ckeditor-form.php