Para ello utilizaremos el editor FCKeditor. Es un software gratuito, aunque también existe versión comercial, y que permite manipular el texto como si se tratase de MS Word o OpenOffice Writer, conocidos por la mayoría de los usuarios.

Haremos la integración de la siguiente manera:

1. Descargamos de la página web de FCKEditor el editor, lo descomprimimos y copiamos su contenido en /app/webroot/js. No es necesario copiar la carpeta samples, si no queremos. De esta manera hemos copiado en /app/webroot/js varios ficheros y una carpeta llamada editor.

2. Copiamos en /app/views/helpers el FckHelper y lo importamos en el controlador en el que queramos que se vea el editor. Necesitamos también importar el helper Ajax.

- FCKHelper (/app/views/helpers/fck.php):

class FckHelper extends HtmlHelper {

var $Width = 500;
var $Height = 300;

function load($id, $width=null, $height=null, $toolbar = 'Default') {
$did = Inflector::camelize(str_replace('/', '_', $id));
if($width){ $this->Width = $width; }
if($height){ $this->Height = $height; }
$js = $this->webroot.'js/';
return<<<FCK_CODE
<script type="text/javascript">
fckLoader_$did = function () {
var bFCKeditor_$did = new FCKeditor('$did');
bFCKeditor_$did.BasePath = '$js';
bFCKeditor_$did.ToolbarSet = '$toolbar';
bFCKeditor_$did.Width = $this->Width;
bFCKeditor_$did.Height = $this->Height;
bFCKeditor_$did.ReplaceTextarea();
}
fckLoader_$did();
</script>
FCK_CODE;
}
function fileBrowserInput($fieldName, $htmlAttributes = array(), $return = false) {
$output = $this->input($fieldName, $htmlAttributes, $return);
if (!isset($htmlAttributes['id'])) {
$htmlAttributes['id'] = $this->model . Inflector::camelize($this->field);
}
$output .= '<script type="text/javascript">';
$output .= "//<![CDATA[\n";
$output .= "function openFileBrowser(id){\n";
$output .= "var fck = new FCKeditor(id);\n";
$output .= "fck.BasePath = '".$this->webroot."js/'\n";
$output .= "var url = fck.BasePath + 'editor/filemanager/browser/default/browser.html?Type=Image&amp;Connector=connectors/php/connector.php';\n";
$output .= "var sOptions = 'toolbar=no,status=no,resizable=yes,dependent=yes,scrollbars=yes';\n";
$output .= "sOptions += ',width=640';\n";
$output .= "sOptions += ',height=480';\n";
$output .= "window.SetUrl = function(fileUrl){\n";
$output .= "\$(id).value = fileUrl;\n";
$output .= "}\n";
$output .= "var oWindow = window.open( url, 'FCKBrowseWindow', sOptions ) ;\n";
$output .= "}\n";
$output .= "//]]>\n";
$output .= '</script>';
$output .= '<a href="#" onclick="openFileBrowser(\''.$htmlAttributes['id'].'\'); return false;">select an image...</a>';
return $output;
}
}

- En el controlador:

var $helpers = array('Fck', 'Ajax');

3. Y en la vista, lo asociamos con el input que queramos a través de su identificador, enlazando previamente el fichero javascript correspondiente:

echo $javascript->link('fckeditor');
echo '<h1>Integración de FCKeditor con CakePHP 1.2</h1>';
echo $form->create('Cliente',array('action'=>''));
	echo $form->input('contenido',array('type'=>'textarea', 'label'=>'', 'id' => 'Contenido'));
	echo $fck->load('Contenido', 600, 300);
echo $form->end();

Ya tenemos nuestro editor, que podemos ver en este ejemplo.