Wednesday, June 30, 2010

Integrating CKEditor and CakePHP : Part 2

In Part 1, I went through one method of adding CKEditor, via jQuery. In this article, I'll cover the basic adding of CKFinder to the CKEditor.

From the previous article, I already have CKFinder installed under app/webroot/ckfinder. Now I just need to configure it, and add it to my ckeditor element. Let's to the element part first.

Because I'm lazy, I've once again opted to use jQuery. The revised ckeditor element now looks like this:

<?php 
echo($javascript->link(array('/ckeditor/ckeditor','/ckeditor/adapters/jquery','/ckfinder/ckfinder'))); 
?>
<script type="text/javascript">
$(function() {
 
 $('textarea').ckeditor();
  
 $('textarea').each(function() {
  var editor = $(this).ckeditorGet();
  CKFinder.setupCKEditor(editor, 
   {basePath: '/ckfinder/', 
   rememberLastFolder: false
   }
  );
 }); 
 
});
</script>


In this change, I've added the ckfinder.js, and I've used jQuery to add CKFinder to every text area that has CKEditor attached.

Now for configuring CKFinder. You'll want to open app/webroot/ckfinder/config.php.

Because this is a basic test, I don't have any authentication on the application (yet), and I'm not too concerned with where I put my uploaded files, as long as they're accessible from the web.

As a result, I ignore all the warnings about authentication, and change the "return false;" in the CheckAuthentication() function to "return true;", and then change the values of $baseUrl and $baseDir to be available at app/webroot/files.

$baseUrl = '/files/';
$baseDir = $_SERVER['DOCUMENT_ROOT'].'/app/webroot/files/';


Just a couple of things to note. My website root points to the folder holding app, cake and vendors, etc, and does not point directly to app/webroot. Change to taste. Also, I've hardcoded the file separators in $baseDir. I'm developing under Windows XP, so if you play under another environment, perhaps you'll do better.

Now, as long as you have created the app/webroot/files directory, and have write permissions to the directory, you should see the Browse Server button from Images , Flash or Links in CKEditor, and can use CKFinder to browser, upload and link in images, flash files or regular files.

I like small blog articles, so there's definitely going to be a Part 3 shortly, which will cover my requirement for uploading files to a specific directory, based on the content identifier.

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

No comments:

Post a Comment