Joseph Crawford

Integrating FCKeditor Into CakePHP

January 28th, 2009 | Tags: CakePHP, FCKeditor, JQuery

There are two different methods of FCKeditor integration to choose from with CakePHP: PHP and JavaScript. I will cover both of them here but I think my personal choice would be using the JavaScript method and replacing the textarea. That way there is a fall back for people with JavaScript turned off. For this example I will be using my previous post about creating a CMS using Cake and adding the famous rich text editor to the add and edit content pages.

The first thing you want to do is download the latest version of FCKeditor. At the time of this writing the current stable version is 2.6.3. You could try the beta version or the nightly build if you feel adventurous but personally I like sticking with stable versions.

PHP Integration Method

After you have finished downloading FCKeditor extract the archive and upload the fckeditor folder to your webroot, /app/webroot/fckeditor. I know most people might say to put this in /app/vendors but I have a reason. Instead of using App::import to import the /fckeditor/fckeditor.php file I took the contents of that file and created a helper with it. I would have imported the distributed class into the helper to make it more portable, but I wanted to rewrite the CreateHtml function to make it a little more CakePHP friendly.

Here is the Fck Helper.

/app/views/helpers/fck.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

<?php
class FckHelper extends AppHelper {
var $InstanceName;
var $InstanceId;
var $BasePath;
var $Width;
var $Height;
var $ToolbarSet;
var $Config;
var $Value;
var $Error;

function __construct() {
$this->BasePath = '/fckeditor/';
$this->Width = '100%';
$this->Height = '400';
$this->ToolbarSet = 'Default';
$this->Config = array();
}

function IsCompatible() {
if ( isset( $_SERVER ) ) {
$sAgent = $_SERVER['HTTP_USER_AGENT'] ;
} else {
global $HTTP_SERVER_VARS ;
if ( isset( $HTTP_SERVER_VARS ) ) {
$sAgent = $HTTP_SERVER_VARS['HTTP_USER_AGENT'] ;
} else {
global $HTTP_USER_AGENT ;
$sAgent = $HTTP_USER_AGENT ;
}
}
if ( strpos($sAgent, 'MSIE') !== false && strpos($sAgent, 'mac') === false && strpos($sAgent, 'Opera') === false ) {
$iVersion = (float)substr($sAgent, strpos($sAgent, 'MSIE') + 5, 3) ;
return ($iVersion >= 5.5) ;
} else if ( strpos($sAgent, 'Gecko/') !== false ) {
$iVersion = (int)substr($sAgent, strpos($sAgent, 'Gecko/') + 6, 8) ;
return ($iVersion >= 20030210) ;
} else if ( strpos($sAgent, 'Opera/') !== false ) {
$fVersion = (float)substr($sAgent, strpos($sAgent, 'Opera/') + 6, 4) ;
return ($fVersion >= 9.5) ;
} else if ( preg_match( "|AppleWebKit/(\d+)|i", $sAgent, $matches ) ) {
$iVersion = $matches[1] ;
return ( $matches[1] >= 522 ) ;
} else return false ;
}

function Create($instance) {
$instance = explode('/', $instance);
$this->InstanceName = 'data['.$instance[0].']['.$instance[1].']';
$this->InstanceId = $instance[0].Inflector::camelize($instance[1]);
$HtmlValue = htmlspecialchars( $this->Value ) ;
$Html = '' ;
if ( $this->IsCompatible() ) {
if ( isset( $_GET['fcksource'] ) && $_GET['fcksource'] == "true" )
$File = 'fckeditor.original.html' ;
else
$File = 'fckeditor.html' ;
$Link = "{$this->BasePath}editor/{$File}?InstanceName={$this->InstanceName}";
if ( $this->ToolbarSet != '' )
$Link .= "&Toolbar={$this->ToolbarSet}" ;
$Html .= "<input type=\"hidden\" id=\"{$this->InstanceId}\" name=\"{$this->InstanceName}\" value=\"{$HtmlValue}\" style=\"display:none\" />";
$Html .= "<input type=\"hidden\" id=\"{$this->InstanceId}___Config\" value=\"" . $this->GetConfigFieldString() . "\" style=\"display:none\" />";
$Html .= "<iframe id=\"{$this->InstanceId}___Frame\" src=\"{$Link}\" width=\"{$this->Width}\" height=\"{$this->Height}\" frameborder=\"0\" scrolling=\"no\"></iframe>";
} else {
if ( strpos( $this->Width, '%' ) === false )
$WidthCSS = $this->Width . 'px';
else
$WidthCSS = $this->Width;
if ( strpos( $this->Height, '%' ) === false )
$HeightCSS = $this->Height . 'px' ;
else
$HeightCSS = $this->Height ;
$Html .= "<textarea name=\"{$this->InstanceName}\" id=\"{$this->InstanceId}\" rows=\"4\" cols=\"40\" style=\"width: {$WidthCSS}; height: {$HeightCSS}\">{$HtmlValue}</textarea>" ;
}
if ( !empty( $this->Error ) ) {
$Html .= '<div class="error-message">'.$this->Error.'</div>';
}
return $Html ;
}

function GetConfigFieldString() {
$sParams = '' ;
$bFirst = true ;
foreach ( $this->Config as $sKey => $sValue ) {
if ( $bFirst == false )
$sParams .= '&' ;
else
$bFirst = false ;
if ( $sValue === true )
$sParams .= $this->EncodeConfig( $sKey ) . '=true' ;
else if ( $sValue === false )
$sParams .= $this->EncodeConfig( $sKey ) . '=false' ;
else
$sParams .= $this->EncodeConfig( $sKey ) . '=' . $this->EncodeConfig( $sValue ) ;
}
return $sParams ;
}

function EncodeConfig( $valueToEncode ) {
$chars = array(
'&' => '%26',
'=' => '%3D',
'"' => '%22' ) ;
return strtr( $valueToEncode, $chars ) ;
}
}
?>

After you have this helper in place you can enable it by adding it to your $helpers array in whatever controller you are working with. I will be using the content controller from my previous post about a simple cms.

<?php
class ContentController extends AppController {
var $name = 'Content';
var $helpers = array('Fck');

After you have that, open your view and pick the field you want to change. Still following the cms example you will want to edit /app/views/content/add.ctp and /app/views/content/edit.ctp like the following.

1
2
3
4
5
6
7
8

// Replace this
echo $form->input('body', array('rows' => '10', 'cols' => '70'));
// With this
if(!empty($this->data['Content']['body']))
$fck->Value = $this->data['Content']['body'];
if(!empty($this->validationErrors['Content']['body']))
$fck->Error = $this->validationErrors['Content']['body'];
echo $fck->Create('Content/body');

There are several other configuration options available. You can look at the documentation for more information. Any options available with their php integration method should also be available with this helper.

The only problem with this method so far is there is no non-JavaScript fall back to a plain text area. There is if the browser is not supported. Maybe there is something there that can be expanded on?

For more information on the PHP Integration method please check out the FCKeditor documentation.

JavaScript Integration Method

There are 3 different JavaScript integration methods to choose from. As I mentioned earlier I personally prefer the textarea replacement method with JQuery. So that is the only one I will go over here.

To get started go ahead and download FCKeditor and place it in your webroot just like with the php method above. Then download JQuery and put it in your /app/webroot/js folder. I usually rename the file to jquery.js to make updates easier. Now enable the JavaScript helper in your controller and add the javascript to your view. Using the cms example the add content view would look like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<h2>New Page</h2>
<?php
echo $form->create('Content', array('url' => '/content/add'));
echo '<div>';
echo ' <label for="ContentParentId">Parent</label>';
echo ' <select name="data[Content][parent_id]" id="ContentParentId">';
echo ' <option value="0"'.((@$this->data['Content']['parent_id'] == 0) ? ' selected' : '').'>None</option>';
if(!empty($parents)) {
foreach($parents as $i) {
echo '<option value="'.$i['Content']['id'].'" style="padding-left: '.($i['Content']['depth'] + 1).'em;"'.((@$this->data['Content']['parent_id'] == $i['Content']['id']) ? ' selected' : '').'>'.$i['Content']['title'].'</option>';
}
}
echo ' </select>';
echo '</div>';
echo $form->input('title', array('size' => 60));
echo $form->input('slug', array('size' => '20', 'after' => ' The Slug is the word used for the URL of this page.'));
echo $form->input('body', array('rows' => '10', 'cols' => '70'));
echo '<div><input type="submit" value="Save" /> or '.$html->link('Cancel', array('action' => 'index')).'</div>';
echo '<fieldset>';
echo ' <legend>META Data</legend>';
echo $form->input('keywords', array('size' => '60'));
echo $form->input('description', array('rows' => '3', 'cols' => '65'));
echo '</fieldset>';
echo $form->end();

#FCKeditor stuff
$javascript->link('jquery', false);
$javascript->link('/fckeditor/fckeditor.js', false);
?>
<script type="text/javascript">
$(document).ready(function() {
var oFCKeditor = new FCKeditor('ContentBody', '100%', '400', 'Default');
oFCKeditor.ReplaceTextarea();
});
</script>

For this to work with everything in your webroot the way it is we also need to add a couple of lines to the bottom of our .htaccess file.

/app/webroot/.haccess

AddType application/x-javascript .js
AddType text/css .css

That should be all you need to do. If you would like more information on the JavaScript integration method please check out the FCKeditor documentation.

Enable The File/Image Upload

First you need to create 4 folders:

/app/webroot/files/file
/app/webroot/files/flash
/app/webroot/files/image
/app/webroot/files/media

Each folder need to be writable by the web server.

Now edit /app/webroot/fckeditor/editor/filemanager/connectors/php/config.php and make the following changes for each line (Line numbers may change according to your version).

30	$Config['Enabled'] = false ;

34	$Config['UserFilesPath'] = '/files/' ;

Be sure and set this next one to the full path of your files directory.

40	$Config['UserFilesAbsolutePath'] = '/var/www/mywebsite.com/htdocs/app/webroot/files/' ;

It should now be working. There is also a lot more information on the CakePHP Bakery that could be useful to you.

Integrating FCKeditor Into CakePHP

PHP Integration Method

JavaScript Integration Method

Enable The File/Image Upload

Advertisement

Tags

Recent Posts

Advertisement

Recent Comments

Advertisements

Photos (view gallery)