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

baluart4 Septiembre 2005 - 4:21pm 76 comentarios
Enviar por Email Imprimir

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.

Comentarios

Imagen de Accuviacejime
Imagen de Micaela
Micaela

Roberto, fijate, no que versi

Imagen de Micaela
Micaela

Roberto, fijate, no que versi

Imagen de Micaela
Micaela

Roberto, fijate, no que versi

Imagen de Sommer
Sommer

Colisteros, no se si me pueden ayudar, trabajo con el CSS Joomla 1.0.12, hemos instalado el editor FCKEditor, el editor no logra subir videos e imagenes. Agradesco si alguien me orienta que debo hacer. Saludos. Sommer. PS. Hemos leido casi todos los c.elect. sobre este editor para Joomla sin encontrar una solucion.

Imagen de yanche
yanche

Escribo para hacer la siguiente consulta, en fckeditor se pueden incluir adem

Imagen de LofeGoberoowl
Imagen de andrea
andrea

hola tengo un problema instale el fckeditor todo bien funcionaba correctamente y de repente ya no muestra el editor como soluciono este problemagracias por su ayuda

Imagen de andrea
andrea

hola tengo un problema instale el fckeditor todo bien funcionaba correctamente y de repente ya no muestra el editor como soluciono este problemagracias por su ayuda

Imagen de andrea
andrea

hola necesito saber por que no me muestra el fckeditor si lo mostraba biengracias

Imagen de Ausmerley
Ausmerley

Hola, tengo problema con los estilos en el FCKeditor, toman las propiedades de los estilos los textos estando en el editor, al visualizar la pagina los textos los muestra sin estilos.Si alguien me puede ayudar, seria de gran ayuda gracias

Imagen de juan
juan

Buenas.Pude configurar el editor en la versi

Imagen de rlopez
rlopez

hola, quisiera saber si hay alguna forma de subir archivos de video con el fckeditor (avi, mgp, wmv) y que se puedan reproducir...muhcas gracias y un saludo!! 

Imagen de F

Estoy diseñando una web en la que varios usuarios pueden acceder a su zona de administraci

Imagen de xurxinho
xurxinho

Estoy desesperado. Comento. El art

Páginas

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más