“How to integrate CKEditor + CKFinder with Session CheckAuthentication into CakePHP”

In the process of web development such as CMS (Content Management System), there are many cases where you may find a WYSIWYG editor or a file manager useful.  However from my experience, I noticed that most web application frameworks provide from crappy to no backend interface for WYSIWYG editors or file managers or uploading functions.

In BeamStyle, we use the CakePHP web application framework.  The CakePHP framework is very easy to use and keeps our code clean.  That’s the reason why we are using it.  But of course, nothing is perfect.  The form filling API is crappy and there is no file management system.

To resolve such an issue, the use of external applications is unavoidable.

In this tutorial, I will introduce the method on how to setup CKEditor (WYSIWYG editor) and CKFinder (File Manager, Upload) with CakePHP with CakePHP Authentication.

== Requirements ==

1) CakePHP has already been setup and working. (http://cakephp.org/)

2) CakePHP Authentication has been setup and working inside CakePHP. (http://book.cakephp.org/view/172/Authentication)

== What you need to get ==

1) Download CKEditor (http://ckeditor.com/)

   – I used CKEditor 3.0.1, released on 16 October 2009

2) Download CKFinder (http://ckfinder.com/)

   – I used CKFinder 1.4.1.1, updated 02.10.2009

== Instructions ==

1) Extract your CKEditor and CKFinder into your /app/webroot/js/ directory

   It should look like the following:

     /app/webroot/js/ckeditor/

  /app/webroot/js/ckfinder/

2) Setup CKEditor in your view:

 a) Assuming that you already have your form and Javascript enabled in your controller, and your controller is named AdminController, and your Admin view is already password protected by CakePHP’s Authentication method (http://book.cakephp.org/view/172/Authentication), first you need to tell your view about the classname for CKEditor.  Let’s use the controller to tell the view about it because we want to follow some engineering ethics and the rules of MVC.

  class AdminController extends AppController {

   ...

   var $helpers = array('Form', 'Html', 'Javascript', 'Time');

  

   $ckeditorClass = 'CKEDITOR';

   $this->set('ckeditorClass', $ckeditorClass);

   ...

  }

 b) Since you will be integrating the CKFinder very soon when CKEditor is complete, let’s also define what’s required by CKFinder now, so we save some trouble later :p  The following specifies the path to the CKFinder application.

  class AdminController extends AppController {

   ...

   var $helpers = array('Form', 'Html', 'Javascript', 'Time');

  

   $ckeditorClass = 'CKEDITOR';

   $this->set('ckeditorClass', $ckeditorClass);

   

   $ckfinderPath = 'js/ckfinder/'

   $this->set('ckfinderPath', $ckfinderPath);

   ...

  }

c1) Now you need to link the javascript libraries for CKEditor and CKFinder into your template (for this example, let’s use the default template -> default.ctp)

 echo $javascript->link('ckeditor/ckeditor.js');

 echo $javascript->link('ckfinder/ckfinder.js'); 

 c2) Now you need to add a CakePHP textarea in your view.  So add it!  And let’s call it “newsContent” for now

  [app/views/admin/index.ctp]

  <?php echo $form->textarea('newsContent', array('class'=>$ckeditorClass)) ?>

c3) Now let’s edit the ckfinder’s config.php file so that everything will link perfectly

$baseUrl = ‘upload/’;

$baseDir = '/home/cakeroot/app/webroot/upload/';

 d) If you give a load on that page, you will see a crappy textarea in your page.

    You want to need to convert that into the trendy CKEditor!  And let’s add some default text to it too! XD

    So what you do is you assign a javascript variable to represent ur newsContent, and we called it “ck_newsContent”.

    After that, we set the contents of it using that variable.

  [app/views/admin/index.ctp]

  <?php echo $form->textarea('newsContent', array('class'=>$ckeditorClass)) ?>

  

  <script type="text/javascript">

  var ck_newsContent = CKEDITOR.replace( 'newsContent' );

  ck_newsContent.setData( '<p>Just click the <b>Image</b> or <b>Link</b> button, and then <b>&quot;Browse Server&quot;</b>.</p>' );

  </script>

 e)  Now, if you just load the page and click on the image icon (circled in red in the above image), u will see Image Properties window showing up like below (Except without the “Server Browser” button)

f) So what is that server browser button?  Well, that is in fact the CKFinder.  Let’s add that!

  [app/views/admin/index.ctp]

  <?php echo $form->textarea('newsContent', array('class'=>$ckeditorClass)) ?>

  

  <script type="text/javascript">

  var ck_newsContent = CKEDITOR.replace( 'newsContent' );

  ck_newsContent.setData( '<p>Just click the <b>Image</b> or <b>Link</b> button, and then <b>&quot;Browse Server&quot;</b>.</p>' );

  CKFinder.SetupCKEditor( ck_newsContent, '<?php echo $ckfinderPath ?>') ;

  </script>

g) After you add the above code and try again and you will see the button.  If you click on the button, you may find the following restriction screen >__<

h) Yes that’s right.  You need authentication check!  Let’s do that!

 Open up app/webroot/js/ckfinder/config.php

And first thing, implement your CheckAuthentication() function, like the following:

function CheckAuthentication()

{

 if( isset($_SESSION['Auth']['User']) )

 {

  return true;

 }

 return false;

}

i) Now, because CakePHP uses a different session name (Not the default name), we gotta tell CKFinder to look inside THAT CAKEPHP SESSION!

 Add the following at the very top of the config.php file, right below <?php

<?php

// Start CakePHP Session

session_name("CAKEPHP");

session_start();

j) Let’s but not least, let’s add an upload folder and grant 757 Permissions to it:

->  app/webroot/upload

k) Now try loading up the Server Browser rom step (g) again and happy surfing!

A point card machine with a mess in front of it.

You may think this is wierd, but actually there are so many websites which does similar things.

One time, I just want to check the minimum requirements for a PC game which I wanted to buy. I went on their website and they presented me with an intro movie. It took more than a minute to load, and I was forced to watch the entire thing. I don’t like that.  Neither do most customers, as they just want the information.

Marketing on the web is different from television.  For a television advertisement, a catchy and pretty animation much give a good image for potential customers.  For Internet advertisement, potential customers just want a quick and easy way to get all the information they want.  In other words, we want to increase our conversion rate, not decrease the conversion rate.

For marketing purpose, I don’t suggest anyone to put a large flash animation in the opening page. Even if you do, please add a link to skip it.

I had finished optimizing a part of my website’s content using a text analyzer and keyword density.  I showed it to my partner for his opinions.  It turns out that he is not satisfied with the content.

My partner told me to think about our target customers (also known as personas),which are generally start-up companies or small companies.  He is right about the fault of my content.  I had all the technical contents listed out.  For a CEO of a small company, he wouldn’t care if we use PHP for our solution.  He won’t care if our pages are written in XHTML instead of HTML.  He won’t care about which e-commerce script we use or the huge list of payment gateways we support.  Heck, they don’t care if we optimized our images or we minimized all the JS/CSS scripts.

Instead, we should step in our customer’s shoes and think about what they want to see in the website in order to buy your products or services.