Will creates nice web-things, builds awesome ideas, and collaborates with other creative types.

Home > Blog > Integrating a file browser into ckeditor & CakePHP

Integrating a file browser into ckeditor & CakePHP

by Will on Oct 24th 2011, 21:08

Although there isn’t a  file browser built into CKEditor, they do have a tool you can download. Unfortunatly they charge for it. Boo.

There are a few alternatives on the web however, so I have selected the best, and integrated it with CkEditor in my cakePHP powerd CMS.

Download the file manager from the nice chaps at core five: http://labs.corefive.com/Projects/FileManager/

Install that in a subdirectory of ckeditor

Follow the instructions and set up your filemanager.config.js like this:

Show Plain Text
  1. // Set this to the server side language you wish to use.
  2. var lang = 'php'; // options: lasso, php, py
  3.  
  4. // Set this to the directory you wish to manage.
  5. var fileRoot = '/app/webroot/somedir/';
  6.  
  7. // Show image previews in grid views?
  8. var showThumbs = true;

Then, nip over to your filemanager.config.php file and set this up:

Show Plain Text
  1. function auth() {
  2.     session_name("CAKEPHP");
  3.     session_start();
  4.     if( isset($_SESSION['Auth']['User']) )
  5.      {
  6.         return true;
  7.         }
  8.     return false;
  9.         }

Make sure you set your timezone and any other configs you need.

Now open up your CkEditor config.js and set up the editor to use the filemanager by default. Here is my config.js so there is no confusion:

Show Plain Text
  1. CKEDITOR.editorConfig = function( config )
  2. {
  3.     // Define changes to default configuration here. For example:
  4.     // config.language = 'fr';
  5.     config.uiColor = 'green';
  6.     config.width = '500';
  7.     config.filebrowserBrowseUrl = '/ckeditor/filemanager/index.html';
  8.     config.filebrowserImageBrowseUrl = '/ckeditor/filemanager/index.html?type=Images';
  9.     config.filebrowserFlashBrowseUrl = '/ckeditor/filemanager/index.html?type=Flash';
  10.     config.filebrowserUploadUrl = '/ckeditor/filemanager/connectors/php/filemanager.php';
  11.     config.filebrowserImageUploadUrl = '/ckeditor/filemanager/connectors/php/filemanager.php?command=QuickUpload&type;=Images';
  12.     config.filebrowserFlashUploadUrl = '/ckeditor/filemanager/connectors/php/filemanager.php?command=QuickUpload&type;=Flash';
  13.     config.toolbar_Full =
  14. [
  15.     ['Bold', 'Table', 'Format' ,'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-', 'Image', 'Style', '-', 'Source']
  16. ];
  17. };

Thats it, fire up your page with CkEditor, hit the image button, and there will be a browse server button. click that and up comes the manager. Hit the grid or table buttons to see all your images!

Credits
Obviously Core 5. Good job guys!
This chap helped me out with auth section:

Integrating a file browser into ckeditor & CakePHP tractor cakephp CMS wysiwyg

blog comments powered by Disqus