Tutorials

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_start()
$_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
    Reply
    • admin
      [email protected]
      CodeIgniter 2.4
      November 24, 2015
      Reply
  • 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
    Reply
    • admin
      [email protected]
      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
      Reply

Leave a Reply

Your email address will not be published.


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