Integración de FCKeditor con CakePHP 1.2
Miércoles, 27 Agosto 2008
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&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.

No. 1 — Marzo 10th, 2009 a 7:54 pm
Primero los felicito por esta iniciativa, ayudando a los que nos estamos iniciendo en Cake.
Sobre este tema, esta buenisimo, andaba buscandolo.
Ahora mi problema es que hice todo tal cual esta escrito aqui, pero me tira un error en la linea del “class FckHelper extends HtmlHelper”, no se porque sera…
Si pudieran ayudarme, se los agradeceria.
Muchas gracias
No. 2 — Marzo 11th, 2009 a 7:58 am
Gracias por tu comentario. En cuanto al error que te tira, sin más información no sé decirte cuál puede ser el problema, ¿qué mensaje de error te muestra? ¿estás metiendo el fichero fck.php en la carpeta correcta?
No. 3 — Marzo 11th, 2009 a 3:59 pm
Logre arreglar el error que tenia…
Pero muchas gracias por tratar de ayudarme.
Sigan con la pagina que esta muy interesante.
Saludos.
No. 4 — Junio 16th, 2009 a 7:01 am
Maestro Tengo un problema , bueno me funciona bien al momento de añadir un registro pero al momento de editar me sale una alerta q no encuentra el textarea alguna solucion?¿
No. 5 — Junio 16th, 2009 a 7:15 am
Puede ser por varias razones,
Comprueba esto y si no son ninguna de estas opciones, dame un poco más de info.
Un saludo.
No. 6 — Julio 18th, 2009 a 12:25 am
MC escribió:
No. 4 — Marzo 11th, 2009 a 3:59 pm
Logre arreglar el error que tenia…
Pero muchas gracias por tratar de ayudarme.
Sigan con la pagina que esta muy interesante.
Saludos.
Tuve el mismo problema que MC, posteo aquí como lo solucionó por si alguno se topa con esto.
En cakephp 1.2 en lugar de heredar de la clase HtmlHelper debemos hacerlo de AppHelper.
Espero que sirva, saludos!
Please continue discussion on the forum: link