Article Content:Integrate KCfinder with CKEditor and Codeigniter

Integrate KCfinder with CKEditor and Codeigniter

Integrate KCfinder with CKEditor and Codeigniter.

How to manage uploaded files with web editor?

This week I had a new task about insert images into articles by using web file manager through CKeditor. (The WYSIWYG editor)
after googling I found KCfinder plugin and another plugin called KCfinder.
The first plugin was commercial so I avoid to use it because I want open source solution.
The second plugin was free compatible with many WYSIWYG editors like ( CKEditor - FCKeditor -  TinyMCE ..Etc.)

But when I tried to integrate it I ran into problems with Codeigniter and my hosting.

After solving these problems I thought to share the right steps because maybe it helps someone.

I suppose you have installed CKEDITOR correctly, so to integrate KCfinder with CKEDITOR do these steps:

1-Download plugin from this link

2-Extract folder to your web server inside the /kcfinder/ directory or any other directory in your website

3- To make KCFinder the default file manager for CKEditor you should editconfig.js file located in the CKEditor's installation directory ,you must define static URL to point to PHP script files,so Modify http://website/your_path/ to match your KCFinder installation path.

CKEDITOR.editorConfig = function(config) {
// ...
    config.filebrowserBrowseUrl = 'http://website/your_path/kcfinder/browse.php?opener=ckeditor&type=files';
    config.filebrowserImageBrowseUrl = 'http://website/your_root/kcfinder/browse.php?opener=ckeditor&type=images';
    config.filebrowserFlashBrowseUrl = 'http://website/your_root/kcfinder/browse.php?opener=ckeditor&type=flash';
    config.filebrowserUploadUrl = 'http://website/your_root/kcfinder/upload.php?opener=ckeditor&type=files';
    config.filebrowserImageUploadUrl = 'http://website/your_root/kcfinder/upload.php?opener=ckeditor&type=images';
    config.filebrowserFlashUploadUrl = 'http://website/your_root/kcfinder/upload.php?opener=ckeditor&type=flash';
// ...

5-Try to run the script by click on the image.  => Click on Browse server,

Then you face error

Fatal error: Invalid opcode 153/1/8

To fix it go to autoload.php file and change spl_autoload_register function with __autoload() .

6-Try to run the script again. You will see this alert message

 (You do not have permission to list the files),

this message for public security reasons to prevent unauthorized persons from upload files by KCfinder script...So you should put this session only after user login.to allow only authorized users to upload files

$_SESSION['KCFINDER'] = array(
'disabled' => false

7-try for the last time, ok it will run.
Good luck wink

  • GoodWin
    what version of CodeIgniter uses?
    November 15, 2015
    • admin
      CodeIgniter 2.4
      November 24, 2015
  • Nishith Joshi
    Hello, I am Following as you have motioned i have structure like->htdocs/mainfolder(websitename)/assets_admin/kcfinder i made changes in CKEDITOR.editorConfig = function(config) {} according to the file structure but when i click on browse button , getting blank screen and when i press uload button,set image and then click on ok button,alert box came with the message"Image path is not defined". if i am having htacess/domainfolder/asssets_admin/kcfinder how many places i have to change Kindly Revert Me As Soon As Possible, I am Stuck from past 2 days.
    December 22, 2016
    • admin
      Hi Nishith Joshi , you need to check the right path because these message means that you enter wrong path,so you see blank page because the wrong path can not invoke ckfinder , also i will update the article with full code ASAP thanks
      December 23, 2016
  • Nadhiful Alim
    can you help me to store image that i have wrote on database?? after integrate kcfinder with codeigniter?
    February 10, 2017
  • ram
    how to do this for multiple file upload through cke editor using codeigniter. and how to save the multiple files to database
    February 12, 2018
    • admin
      there is another post for how to upload multiple files,and kcfinder for sure allow to upload multiple files into editor
      February 12, 2018
  • ram
    can u send me the link of that post for multiple file upload using kce editor ?
    February 14, 2018
    • admin
      it is the same tutorial
      February 20, 2018
  • mehdi
    The BEST way. tkx
    March 7, 2018

Leave a Reply

Your email address will not be published.

Notify me of followup comments via e-mail.
You can also Subscribe without commenting.