Zend Framework: How to add FCKeditor to a Zend_Form

UPDATE: Please use my TinyMCE Zend_Form instructions instead: they are easier. They are also potentially more secure since the instructions below advocate an outdated, flimsy form of html filtering.

There are around 1,083,367 JavaScript-based Rich-Text Editors out there, and I’m sure most are pretty good. But I’ve had good results with FCKeditor so I use it on all my projects. Here’s a step-by-step guide to adding the FCKeditor to your Zend Form Elements.

1 – The basics

Download FCKeditor and Upload it to your Web Server. It needs to be somewhere accessible to the world, for example: /js/fckeditor/, which on your server may be a path like /var/www/html/your_site/js/fckeditor/.


2 – .htaccess

The .htaccess that sets up your index.php as the bootstrap needs to exclude the files that FCKeditor uses. If your bootstrap code in .htaccess looks like this:

RewriteEngine on
RewriteRule !\.(js|ico|gif|jpg|png|css)$ index.php

you’ll need to change it. I typically only rewrite to /index.php if the requested file really doesn’t exist. So .htaccess should be something like this:

RewriteEngine on
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1


3 – Zend_Form Elements

In the Form code, you need to make sure that you know the id of the Element (In this case the id is ‘body’), and that you are filtering out all tags and attributes that you don’t want to explicitly allow. Create an allowed_tags list like the one below and ensure that the FormElement has a StripTags filter applied to it:

$allowed_tags = array(
	'a' =>	array('href', 'title'),
	'strong',
	'img'	=>	array('src', 'alt'),
	'ul',
	'ol',
	'li',
	'em',
	'u',
	'strike');

$body = new Zend_Form_Element_Textarea('body');
$body->setLabel('Body')
	->setAttrib('rows', 12)
	->setAttrib('cols', 40)
	->setRequired(true)
	->addFilter('StringTrim')
	->addFilter('StripTags', $allowed_tags);


4 – View Script

Let’s Assume that you use Layouts, and that you only want to use the FCKeditor on a couple of pages on your site. You don’t want to include the FCKeditor code on every page because it just adds to the page size, so we do something like this in the View Script (Note: WordPress is messing with the quote marks in this block, ensure you have single quotes after src= and before the last semicolon. The other quotes should be double quotes.):

$this->custom_head = '<script src="/js/fckeditor/fckeditor.js" type="text/javascript"></script>';
$this->custom_head .= "<script language='javascript' type='text/javascript' src='/js/customs.js'></script>";
$this->custom_body = ' onload="setupFCK()"';


5 – Layout Script

The Layout Script needs to know about this new variable, so the Layout Script needs to know to refer to $this->custom_head if it is set. Drop the code below inside the <head> section of your layout script:

<?php

if ($this->custom_head) {
	echo $this->custom_head;
}
?>

…and change the html body element to look like this:

<body<?php if ($this->custom_body) {
	echo $this->custom_body;
}?>>

6 – Loading the FCKEditor when the page loads

Create /js/custom.js and put this in it:

function setUpFCK() { if(document.getElementById('body')) { var oFCKeditor = new FCKeditor('body') ; oFCKeditor.BasePath = "/js/fckeditor/" ; oFCKeditor.Height = 400; oFCKeditor.ReplaceTextarea() ; } }

7 – FCKeditor changes

I like to implement FCKeditor as a single row of buttons for basic editing, just to keep it from looking too big and clunky. I use a set of icons like this:

FCKConfig.ToolbarSets["Default"] = [
	['Bold','Italic','Underline','StrikeThrough','OrderedList','UnorderedList','Blockquote','Link','Unlink','Image', 'SpecialChar','SpellCheck']
] ;

And I don’t want to enable any kind of file uploads, so I make sure these configs are all set to false (edited to show the relevant bits):

FCKConfig.LinkBrowser = false ;
...
FCKConfig.ImageBrowser = false ;
...
FCKConfig.FlashBrowser = false ;
...
FCKConfig.LinkUpload = false ;
...
FCKConfig.ImageUpload = false ;
...
FCKConfig.FlashUpload = false ;


8 – Anything else?

Not really! There are no Controller changes, which is good because this stuff all belongs in Views anyway. The Models know about the allowed tags, which is good because that’s the kind of work that Models should do. So to me this solution fits the MVC pattern and is not too hack-like. Feedback welcome…

Update: 25/3/09

Fixed various problems with the instructions and it should now all work properly.

Update: 29/11/2011

Fixed a typo. Also: check out Frost’s comment below for a tidier way to do this.

2 responses to Zend Framework: How to add FCKeditor to a Zend_Form

  1. I did the changes as per your instruction but its didt work for me
    Please see the error, At bottom I have placed my .htaccess file

    403 Forbidden

    Forbidden
    You don’t have permission to access /ZendTecAdmin/public/js/ckeditor/ckeditor.js
    on this server.

    .htaccess
    RewriteEngine On
    RewriteRule ^(.*)$ %{ENV:BASE}index.php [NC,L]
    RewriteCond %{SCRIPT_FILENAME} !-f
    RewriteCond %{SCRIPT_FILENAME} !-d

    Please suggest for solution.

    • Hi Praveen,

      I think you’re trying to access a local path from a browser. Based on the local path you provided (‘/ZendTecAdmin/public/js/ckeditor/ckeditor.js’), the url is probably something like //js/ckeditor/ckeditor.js

      Hope that helps.

      J

Leave a Reply

*

Text formatting is available via select HTML.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>