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:

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:

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.):

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:

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.

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