Integrating Ckfinder plugin in CkEditor

Ckfinder plugin is a ajax file manager for the html editor like ckeditor. It is a popular plugin for uploading your files. Right now ckedior’s file uploader doesnt work fine. So you can use ckfinder for file uploading purpose.

It can be used for free. But if you want to use a licensed version  that is also possible. For this all you need to go to their home page and order for a license.

Step-1:

Download ck-finder from their home page.

Step-2:

Unzip the file and Keep ckfinder and ckeditor in the same directory.

Step-3:

To load the file uploader/browse server button in  ck-editor we just need to link up the ckfinder.js file as well as ckeditor.js file in the view file. Then put the following codes in the view file and the configure file.

a) Codes to be inserted in your view file :

<?php
     echo $javascript->link('/ckeditor/ckeditor'); //Link the ckeditor.js file on the page you want to use the editor.
     echo $javascript->link('/ckefinder/ckfinder'); //Link the ckfinder.js file on the page you want to use the editor.?>
<?php
    echo $form->textarea('content', array('id'=>'content','class'=>'ckeditor'));
?>
// we should Place this script after the textrea loads.
<script type="text/javascript">

     var ck_newsContent = CKEDITOR.replace( 'content' ); //the textarea id is given here to override the editor uploader with ckfinder.
     CKFinder.SetupCKEditor( ck_newsContent, 'ckfinder/') ;

</script>

b) Codes to be edited in the config.php file of ckfinder folder.

function CheckAuthentication()
{
   // return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
   //return false;

   return true;
}

$baseUrl = 'http://localhost/bidesh/system/webroot/js/ckfinder/userfiles/';

$baseDir = 'D:\wamp/www/bidesh/system/webroot/js/ckfinder/userfiles/';

Thats it….

Advertisement