Online editor in Cake - FCKeditor

This tutorial describes how to run the online editor (FCKeditor) in a Cake application.

• Cake framework installed and working
• FCKeditor - http://fckeditor.net - one of the best online editor written in JavaScript
• Coffee, beer, water, whatever you prefer

Let’s create the table contents (id, value):

CREATE TABLE contents(id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, value TEXT NOT NULL)

Then we create a model class - /app/models/content.php

class Content extends AppModel {
    var $name = 'Content';
}

and a controller class - /app/controllers/contents_controller.php

class ContentsController extends AppController{
    var $name = 'Contents';
    var $scaffold;
}

That’s all for now.

We use scaffolding, so you can point your browser to www.example.com/contents

You should see an empty list and a new content button. Add some content to the database using scaffold magic.

Download, unzip and copy:

1. file fckeditor.php to your /vendors/ directory, it’s on the top of directory structure,
2. files: fckstyles.xml, fcktemplates.xml and fckconfig.js to /app/webroot/js directory,
3. editor dir to /app/webroot/js directory.

That’s all.

We need to write our own edit action and a view for this action.

Change contents_controller.php to:

 
class ContentsController extends AppController
{
    var $name = 'Contents';
    var $scaffold;
    var $sanitize;
	
    function edit()
    {		
        if( empty( $this->params['data'] ) ) {
            $this->set( 'data', $this->Content->read() );
            $this->render();
        }else{				
            $data  = $this->params['data'];
            if ( $this->Content->save( $this->params['data']) ) {
                    $this->redirect( '/contents' );
            } else {
                $this->render();
            }
        }
    }	
}
 

We over-rode the scaffold edit method, so this method will run when the scaffold edit action is run. We need a view for the edit method. Create a contents directory in the /app/views directory.

Then create the file edit.thtml and write:

<?php 
// load fckeditor.php class from the /vendor directory
vendor('fckeditor'); 
?>
<h1>Editing content in FCKEditor</h1>
<?php echo $html->formTag('/contents/edit')?>
<?php echo $html->hidden('Content/id'); ?>
<?php
// creating fckeditor object
 
$oFCKeditor = new FCKeditor('data[Content][value]') ; // constructor parameter is a fild name in form
 
$oFCKeditor->BasePath = "/js/"; // folder where javascript files are, must be /js/ or subfolder
$oFCKeditor->Value = $data['Content']['value']; // edited content
$oFCKeditor->Create(); // here will be editor frame
?>
<?php echo $html->submit('Save')  ?>
</form>

That is all. Visit FCKeditor for more documentation.

Just change some config files.

In /app/webroot/js/editor/filrmanager/browser/default/connectors/php/config.php set value of $Config[’Enabled’] to true, and $Config[’UserFilesPath’] to /app/webroot/img/. The images will be saved in Image subfolder of /app/webroot/img/.

Using version 2.2 of FCKeditor, I found I also needed to change two more values in /app/webroot/js/editor/fckconfig.js: _FileBrowserLanguage and _QuickUploadLanguage - they were set to asp by default, I switched them to php and the upload started working.

If your web document root is set to your cake root folder, then replace $oFCKeditor→BasePath = “/js/”; by $oFCKeditor→BasePath = “/app/webroot/js/”;

Alternatively, you can set $oFCKeditor→BasePath = $this→webroot.JS_URL; making it a little more portable. Beware though that this does not change the path for the filemanager. The filemanager should on a live site be integrated into whatever authentication system is being used.

You can use FCKEditor to overwrite an existing textarea field too. For this you have to follow a slightly diffent process.

1. You do not need a vendors/fckeditor.php file.
2. You simply have to initialize an FCKEditor object after loading your page useing the id of your textarea tag. You can achieve this by using the javascript helper with the following code for example in your layout file:

if(in_array($this->action,array('edit','add'))){
 echo $javascript->link('fckeditor')."\n";
 $code = <<<FCK_CODE
 onload = function() {
  var bFCKeditor = new FCKeditor( 'textarea_id' ) ;
  bFCKeditor.BasePath = "/js/"
  bFCKeditor.ReplaceTextarea() ;
 }
 FCK_CODE;
 echo $javascript->codeBlock($code);
}

With this code we are includeing the fckeditor.js file only if the requested action is edit or add, and then we create an FCKEditor object for the textarea_id textarea.

If you like the prototype framework then you could use its event handler method to initiate the FCKEditor object.

I use an javascript / ajax edit process on one of my sites and load the edit process entirely through javascript. In order to use load FCKEditor on the fly i followed these instructions and loaded the page, then using view source, i extracted the variables created by the php call. Now, i only load the editor when i need it. I use the following code snippet in my javascript:

<div>
<input type="hidden" id="//my_field_name//" name="//my_field_name//" value="THIS IS SOME TEXT" style="display:none" />
<input type="hidden" id="//my_field_name//___Config" value="" style="display:none" />
<iframe id="//my_field_name//___Frame" src="/js/editor/fckeditor.html?InstanceName=body&amp;Toolbar=Basic" width="100%" height="280" frameborder="0" scrolling="yes"></iframe>
</div>