Integración de FCK Editor en cakephp 1.2
A la hora de desarrollar nuestras aplicaciones web es bastante importante contar con un editor para los cuadros de texto, cakephp 1.2 aún no tiene uno integrado pero es bastante fácil integrar editores open source como fkceditor y tinymce.
Acá aprenderemos a integrar FCK editor con nuestras aplicaciones cakephp, más adelante veremos como integrar tinymce.
- Ingresamos al sitio de fckeditor y descargamos la última versión.
- Copiaremos la carpeta editor y los siguientes archivos en la carpeta app/webroot/js de nuestro cakephp fckeditor_php4.php, fckeditor_php5.php, fckeditor.js, fckconfig.js, fckstyles.xml and fcktemplates.xml. En el interior de la carpeta editor/filemanager/connectors/ podemos borrar todas las carpetas y dejar sólo la carpeta php.
- Ahora pasamos a crear el Helper
Crea el archivo en /app/views/helper/fck.php
<?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;
}
}
?>
Ahora habilitaremos el editor en los controladores que deseamos esté presente (Activa el helper de Ajax):
var $helpers = array('Html', 'Form', 'Javascript', 'Fck', 'Ajax');
Ahora en las vistas donde el editor aparecerá agreguemos esta línea al comienzo de la vista
<?php echo $javascript->link('fckeditor'); ?>
Por último cargaremos el editor en los textarea que lo requieran, para ello nuetro form debe contener lo siguiente
<?php echo $form->create('News');?>
<?php
echo $form->input('title');
echo $form->input('new', array('type' => 'textarea'));
echo $fck->load('NewsNew', 890, 300);
?>
<?php echo $form->end('Enviar);?>
NewsNew equivale al id del textarea en el que deseemos esté ubicado el editor, podemos asignarle uno en el arreglo de opciones del textarea mediante la opción ‘id’ => ‘nombre deseado’ y luego reemplazar el nombre en fck->load.
El 980, 300 equivale al tamaño del textarea, podemos elegir los valores que deseemos.
