CKEditor and Image upload

In Javascript on November 2nd, 2011

CKEditor is excellent RTF (WYSIWYG) editor, but in latest version they remove image upload features. That was inbuilt in earlier version. Now they have CKFInder, a plugin which need to be purchased. There is nothing wrong that they want to earn money with CKFinder plugin. Still thanks to CKEditor team, they made easy to integrate third party plugins.

I have found another easy and free way to integrate file upload, it is called FileManager. So, here is how I integrated file upload in CKEditor.

  1. Download FileManger from here http://labs.corefive.com/Projects/FileManager/. Or from here https://github.com/simogeo/Filemanager
  2. Follow instruction in readme.md file. of instruction in above link to configure FileManger and connector.
  3. Now, all you to do is change config.js (full pate ckeditor/config.js) file of your CKEditor.  Below is sample configuration I kept:
  1. CKEDITOR.editorConfig = function( config )
  2. {
  3.  // Define changes to default configuration here. For example:
  4.  // config.language = 'fr';
  5.  // config.uiColor = '#AADC6E';
  6.  config.filebrowserBrowseUrl = 'http://myhost.com/filemanager/index.html';
  7.   config.filebrowserImageBrowseUrl = 'http://myhost.com/filemanager/index.html?type=Images&currentFolder=/Image/';
  8.   config.filebrowserFlashBrowseUrl = 'http://myhost.com/filemanager/index.html?type=Flash&currentFolder=/Flash/';
  9.   config.filebrowserUploadUrl = 'http://myhost.com/filemanager/connectors/php/filemanager.php?mode=add&type=Files&currentFolder=/File/';
  10.   config.filebrowserImageUploadUrl = 'http://myhost.com/filemanager/connectors/php/filemanager.php?mode=add&type=Images&currentFolder=/Image/';
  11.   config.filebrowserFlashUploadUrl = 'http://myhost.com/filemanager/connectors/php/filemanager.php?mode=add&type=Flash&currentFolder=/Flash/';
  12.  
  13. };
, , ,