CKEditor image upload not working

Question

I am using ckeditor 4.2 in my cakePHP application. I have installed it in my app/webroot/js/ckeditor directory.

I wanted to have an image upload option in my ckeditor so i downloaded the ckeditor image plugin( http://ckeditor.com/addon/image ). I installed it using following documentation ( http://www.paulfp.net/blog/2010/10/how-to-add-and-upload-an-image-using-ckeditor/ )

Now, the image upload interface looks fine, but when i click on "Send it to the server" button, it does not call the PHP script. I have set the path to "filebrowserUploadUrl" in my config.js but its still not working. I have done the same settings as the above mentioned documentation yet i am not able to call that script.

Note : When i click "Send it to the server" button for some unknown reason i see that controller_name/undefined action is being called.

Answer 1

Alternatively you can use KCFinder. It is free open-source web file manager. It can be integrated into FCKeditor, CKEditor, and TinyMCE WYSIWYG web editors (or your custom web applications) to upload and manage images, flash movies, and other files that can be embedded in an editor's generated HTML content.

http://kcfinder.sunhater.com

Answer 2

CKEditor is the favorite web-based word processor of almost all the web developers. But the issue is, it does not come with an in-built image uploading feature, ie CKEditor does not know how to handle image uploads. So we will assign an assistant who knows how to deal with image uploads and file management.

Our assistant is KCFinder, a free open-source web file manager. It can be integrated into FCKeditor, CKEditor, and TinyMCE WYSIWYG web editors (or your custom web applications) to upload and manage images, flash movies, and other files that can be embedded in an editor's generated HTML content.

I assume you have already set up your CKEditor into your web page. If you haven't done it yet, you can follow the instructions in my previous article: CKEditor: Web-based Word Processor For Your Web Pages

Let's get into our business.

1) Download KCFinder > http://kcfinder.sunhater.com/download

2) Extract the kcfinder directory in the .zip file to the public directory of your project.

3) Open /public/ckeditor/config.js and add code lines as follows;

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

/* Show these image/flash browsing feature only to Admins */
config.filebrowserBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=files';
config.filebrowserImageBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=images';
config.filebrowserFlashBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=flash';

/* Image/Flash upload feature using kcfinder tool */
config.filebrowserUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=files';
config.filebrowserImageUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=images';
config.filebrowserFlashUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=flash';

};

If you do not want to let your users browse through previously-uploaded files in the server, you can remove/block-comment the first three lines and keep only the last three lines which actually do the uploading part or else you can add user level controls for each feature as per your requirement. Never let users to see the files in your server. If they change the files, other file links can be broken and it will result in huge mess in your application.

4) Activate KCFinder.

By default KCFinder comes disabled. To change it, go to kcfinder/conf/config.php and under general settings, change the value of 'disabled' to false. Now, users can upload and manage files (in our case, the image files) on your web application using CKEditor interface.

You can check the detailed steps in my blog article: https://ashenlive.blogspot.com/2016/09/ckeditor-image-upload-with-kcfinder.html