Tuesday, June 29, 2010

Integrating CKEditor and CakePHP : Part 1

I've been using TinyMCE in my CakePHP projects for a little while now, and while it seems to be able to do the job so far, it's always good to try new things. So I thought I'd give CKEditor and CKFinder a go, as an alternative.

The article is likely to spread over 3 or 4 articles as I approach the end goal of integrating CKEditor and CKFinder in the same was that I do for TinyMCE and the free TinyMCE uploader plugin.

Before I go too much further, here's a list of the functionality I'll be looking to replicate:
  1. Replacing textareas with CKEditor
  2. Making usage of CKFinder
  3. Restricting CKFinder to an upload directory, based on a model instance
  4. Integrating CakePHP authentication with CKFinder
  5. Providing CSS to CKEditor to achieve WYSIWYG editing

This article is likely to deal with point 1.

My test project is a simple editors project that consists of a single table called contents that has an id, name and content. I'm also using CakePHP 1.3.2.

The first step is to bake your model, controller and views. I made a few mods to exclude the content from being displayed in the index view. Make sure you can add and edit content items using the plain text areas.

The next steps are to install CKEditor and CKFinder. I added both to the app/webroot directory (i.e. app/webroot/ckeditor, app/webroot/ckfinder).

Being cautious, I decided to just deal with the CKEditor first.

First, I created a ckeditor element, and added
echo $this->element('ckeditor'); 

to the top of my contents add.ctp and edit.ctp views.

And because I'm lazy, I decided to use jQuery to activate CKEditor on my textareas.

<?php 
echo($javascript->link(array('/ckeditor/ckeditor','/ckeditor/adapters/jquery'))); 
?>
<script type="text/javascript">
$(function() {
 
 $('textarea').ckeditor();
 
});

Don't forgot to update your layout to include the jQuery library, and create an application specific app_controller.php that includes the Javascript Helper (may as well add the Session helper and component for future usage).

And that's about it for adding CKEditor.

In my next posting, all address adding CKFinder.

Series Index : Part 1, Part 2, Part 3, Part 4, Part 5, Part 6

No comments:

Post a Comment