Integración de FCKeditor con CakePHP 1.2

En el desarrollo de páginas web muchas veces tenemos la necesidad de introducir un editor de texto, sobre todo cuando es un usuario que no tiene conocimientos de html y css el que tiene que editar un campo o valor que será visible en una página web.

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.