FCKeditor (III Parte): Configurando el Administrador de Archivos y el uso de CSS

Corríjanme si me equivoco, pero subir ficheros (pdf por ejemplo), películas flash e imágenes no es una característica que podamos encontrar en otro editor web on line gratuitamente.

Por ello dedicamos este post a la configuración de esta característica y a la sencilla explicación de como poder hacer uso del CSS en nuestro editor on line.

Configurando el Manejo de Archivos e Imágenes

1er paso: El fichero fckconfig.js

El fichero fckconfig.js es imprescindible para el funcionamiento del editor, en él se determinan todas sus características y funcionalidades.

Abrelo y ubica las siguientes líneas. Cada una se encuentra separada de la otra, lo importante es que todas estén activas (true):

FCKConfig.LinkBrowser = true ;
FCKConfig.ImageBrowser = true ;
FCKConfig.FlashBrowser = true ;
FCKConfig.LinkUpload = true ;
FCKConfig.ImageUpload = true ;
FCKConfig.FlashUpload = true ; 

De esta manera le dices a FCKeditor que active el explorador de archivos (.pdf), imágenes (.gif, .jpg, .png) y ficheros flash (.swf) para poder navegar y subir los ficheros pertinentes.

En medio de cada una de estas líneas encontrarás unas líneas que hacen referencia a la dirección url del fichero encargado de explorar las imágenes, ya te puedes dar cuenta que si estas trabajando en un servidor .ASP, ColdFusion, JSP... tienen diferente URL.

En nuestro caso, como trabajamos con PHP, no es necesario que mantengamos las otras variables activas, por lo que recomiendo ponerlas como comentarios (ya sabes, añades // al principio de cada línea).

Pero lo que debes dejar activo son todas aquellas líneas que hagan referencia a ficheros php, como esta por ejemplo:

FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 
'filemanager/browser/default/browser.html?Connector=connectors/php/
connector.php' ; 

Esta parte de código quedaría (sólo para PHP) como sigue:

//Explorar Archivos
FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/php/
connector.php' ;
FCKConfig.LinkBrowserWindowWidth = screen.width * 0.7 ; // 70%
FCKConfig.LinkBrowserWindowHeight = screen.height * 0.7 ; // 70%

//Explorar Imágnes
FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=
connectors/php/connector.php' ;
FCKConfig.ImageBrowserWindowWidth = screen.width * 0.7 ; // 70% ;
FCKConfig.ImageBrowserWindowHeight = screen.height * 0.7 ; // 70% ;

//Explorar Peliculas Flash
FCKConfig.FlashBrowser = true ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=
connectors/php/connector.php' ;
FCKConfig.FlashBrowserWindowWidth = screen.width * 0.7 ; //70% ;
FCKConfig.FlashBrowserWindowHeight = screen.height * 0.7 ; //70% ;

//Subir Archivos
FCKConfig.LinkUpload = true ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/php/upload.php' ;

//Subir Imágenes
FCKConfig.ImageUpload = true ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/php/upload.php?Type=Image' ;
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png)$" ;
FCKConfig.ImageUploadDeniedExtensions = "" ;

//Subir Películas Flash
FCKConfig.FlashUpload = true ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/php/upload.php?Type=Flash' ;
FCKConfig.FlashUploadAllowedExtensions = ".(swf|fla)$" ;
FCKConfig.FlashUploadDeniedExtensions = "" ;

Con esto haz terminado con el config del FCKeditor, ahora solamente tenemos que activar el script PHP.

2do paso: El fichero config.js del FileManager

Abre el fichero config.php ubicado en:

filemanager/upload/php/config.php

y ubica la siguiente línea

$Config['Enabled'] = true ; //false

Esta variable por defecto viene desactivada (false), debemos activarla (true).

Con la línea de codigo siguiente, vamos a definir la carpeta madre o raíz del explorador.

$Config['UserFilesPath'] = '/UserFiles/' ;

Su nombre podemos cambiarlo al clásico img, aunque a mi gusto UserFiles define su objetivo, pues no sólo manejamos imágenes, sino además archivos y películas flash.

Con esto tu Editor ya esta listo para explorar y subir archivos e imágenes.

Otro tema, mucho más simple es lo referente al CSS.

Determinando el CSS de nuestro Site

El CSS se vuelve imprescindible para un diseñador web, no sólo por su fácil programación o por ir de la mano con los standares, sino principalmente por la facilidad de poder modificar de un solo tiro, todas las etiquetas predefinidas.

FCKeditor te permite añadir directamente los CSS a los tag html, pero a diferencia de otros editores, debemos definirlos en el fichero fckstyles.xml.

Bajo el formato xml uno encuentra tres tipos de etiquetas:

• <Styles>: Etiqueta madre que envuelve a las otras dos.
• <Style>: Donde definimos el nombre de la etiqueta y el elemento html al que le vamos a aplicar (div, span, img, p, etc.)
• <Attribute>: Aquí definimos el nombre del atributo, por ejemplo una clase (class) y el nombre del valor de la clase.

Por ejemplo, yo tengo creado mi fichero style.css, donde condenso todos los estilos que dan vida a mi diseño. En él se encuentran tres clases:

/*Clase para flotar imagen a la izquierda*/
.leftimage{float: left; margin-right: 10px;padding:5px 0;}

/* Clase para flotar imagen a la derecha */
.rightimage{float: right;margin-left: 10px;padding: 5px 0;}

/*Clase que sólo applicable a un elemento div*/
.cuadroGris{background-color:#F5F6F7;width:600px;border: 2px solid #FFFFFF;padding: 5px;margin: 15px 30px;}

Ahora bien, para poder utilizarlas en el editor, el fichero fckstyles.xml deberá estar como sigue:

De esta manera cuando hagamos uso de nuestro editor, al seleccionar alguna imagen y luego seleccionar el menú desplegable de los estilos, aparecerán las clases que apuntan al elemento img.

En el caso de utilizar un div, aparecerá la clase cuadroGris.

Con nuestro FCKeditor configurado para subir archivos e imágenes y listo para editar con CSS, sólo me queda un detalle más que explicar. Como personalizar la vista previa de nuestro editor, pero esto lo dejaremos para un post posterior.