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 Marco Luna
Marco Luna

Hola BalúHe seguido tus pasos, pero no suben las imagenes, hay algo mas que pudieras mencionar para lograr que subanGracias

Imagen de Balú

Acabo de fijarme en el soporte técnico de FCKeditor y lo dicho en este artículo sigue estando vigente y es todo lo que se debe hacer para que el Administrador funcione. Por lo que debes estar cometiendo algún pequeño error. Saludos.

Imagen de Diego Perdomo
Diego Perdomo

Al igual que el mensaje anterior, segui los pasos pero el administrador para subir imagenes no funciona, que pude ser?

Imagen de Balú

Hola Diego.  Te agradecería si me precisas lo siguiente: ¿Aaparece algún mensaje de error? ¿La carpeta donde vas a almacenar las imágenes (UserFiles) tiene permiso de escritura (CHMOD 777)? ¿Abre el popup del explorador, pero como archivo inexistente?. Saludos.

Imagen de Rafael Gallego

Balú, sin la información de tu blog no podría haber configurado el FCKeditor. Gracias. Respecto a esto de las figuras, yo he tenido que editar DOS ficheros config.php, uno el que tu dices y otro que esta en: FCKeditoreditorfilemanagerrowserdefaultconnectorsphp De hecho editando solo el primero, me salía un mensaje diciendo que cambiara el Config['Enabled'] en el segundo.Y ahora aprovecho y te hago DOS preguntas:

  1. Editando el Source pueden introducirse todas las etiquetas que uno quiera: ¿puede limitarse con FCKeditor las etiquetas admitidas? (Además de quitando el botón Source, claro)
  2. No tiene nada que ver con esto (o poco), pero ¿conoces alguna función PHP que recorte un texto HTML a un número de caracteres dados, pero sin contar las etiquetas HTML, y dejando todas las etiquetas cerradas? Es dificil, lo sé, tendría que estas limitada a un número de etiquetas conocidas y dadas, claro.

Gracias de nuevo.

Imagen de Carlos Fernando Benitez
Carlos Fernando...

Ya tengo la solucion al problema que se presenta cuando deseo hacer un upload para realizar link o subir imagenes.... es un pequeño pero enloquecedor detalle, creanme dura 1 semana buscando, analizando haciendo paso a paso todas las indicaciones y la verdad el detalle no es de configuración, la configiración que aqui se explica esta SUPERBIEN, por via email les envio a los interesados la solución
Muchas gracias

Imagen de jasebe
jasebe

Buenas,

Tengo una inquietud con respecto a los archivos que se cargan con el fckeditor, el coloca un nombre especifico o deja el que tiene el archivo por defecto, la verdad me gustaria que tuviera un formato adicional, esto se puede o no?

Gracias de antemano.

Imagen de Delkis
Delkis

Hola.

Fijate que quiero hacer una web donde pueda subir archivos pdf y luego visualizarlos y descargarlos si el usuario quiere hacerlo. como lo hago? he leido al respecto pero en relidad no logro comprender como se hace esto. puedes audarme por favor?

Imagen de daosami
Imagen de Estudio411
Estudio411

Al intentar acceder al servidor de archivos cargados, me aparece una ventana de error con el siguiente encabezado:

The server didn't send back a proper XML response.

A que se debe esto ? Gracias

Imagen de Nely

Hola a todos.
Tengo el siguiente problema en wampserver he probado y todo me sale perfecto, pero cuando voy al servidor de la web resulta que no me sube el archivo pdf y me da el siguiente error:
error creating folder "var/www/vhosts/icea.com.es/httpdocs/userfiles/file/"'(mkdir()[funtion.mkdir]:Permission denied)
¿Tengo que hacer mas cambios en fckeditor (recuerden que en mi localhost me funciona bien) o tengo que llamar al servidor para que me den algun tipo de permiso??

Imagen de juanito perez
juanito perez

PREGUNTA.. EN EL FCKconfig se puede fijar una cantidad de caracteres fija ??

Imagen de yoshimitsu
yoshimitsu

orale pos la neta muy chido mi cuate

Imagen de Azcorra
Azcorra

Hola Carlos, fijate que ya he logrado subir el FCKeditor a mi servidor, pero al momento de subir imagenes simplemente no me los trepa, leyendo por este foro vi que tu dices tener una solucion para esto. Quisiera saber si podrias proporcionarme esa solucion que indicas.

Imagen de hecayesan
hecayesan

Hola, Agradecería mucho me dijeras como solucionaste la subida de imágenes en el fckeditor. Gracias.

Imagen de baluart
Imagen de Edwin Chileno Soto
Imagen de Balú

Hola Rafael. Respecto al connectorsphp, gracias por el detalle. Cuando descargue el script me vino activado, pensé que venía así por default, ahora veo que en las actualizaciones están en "false".Por tanto, si alguen tiene problemas, hay que dirigirse a:FCKeditoreditorfilemanagerrowserdefaultconnectorsphpconfig.phpUbicar la variable (Línea 22) y, si esta en “false”, cambiarlo a “true”.$Config['Enabled'] = true ; //falseNuevamente Rafael, gracias por el dato.Respecto a las etiquetas admitidas, nunca he tenido necesidad de limitarlas, por lo que no te podría decir como hacerlo. Sin embargo, no lo recomiendo. Recuerda que FCKeditor se va actualizando constantemente y tendrías que estar modificándolo constantemente. Desde mi punto de vista es más fácil usar alguna función PHP que extraiga las etiquetas HTML de la variable que envías a la BD. Por ejemplo puedes usar la función str_replace.Un ejemplo seria el siguiente:$variableTextoSinEditar = str_replace("<body>",' ', $variableTextoSinEditar);$variableTextoEditado = str_replace("</body>",' ', $variableTextoSinEditar);De esta manera, eliminas la etiqueta body (de apertura o de cierre) si es que alguien la escribió.Respecto a la segunda pregunta, me parece que vas a tener que crear una, porque no recuerdo la existencia de una función con esas características. Yo para casos parecidos utilizo Substr para recortar las cadenas, pero toma en cuenta el html. También te podría ser útil la función strip_tags para quitar las etiquetas. Aunque todo depende de lo que vas a hacer, de repente necesitas utilizar expresiones regulares.Saludos.

Imagen de xil
xil

hola Balú, gracias por esta "guía" me ha sido muy útil. ¿Sabes si en el editor viene por defecto alguna opción para eliminar las imágenes que se suben al servidor? De no ser así, ya lo haré yo. Es que todavía me estoy familiarizando y no sé si con habilitar alguna función sería suficiente, pero en ese caso no sé qué archivo tendría que modificar.

Imagen de Bibliotec
Bibliotec

Gracias por el tutorial me ha sido muy util, sabes si existe alguna forma sencilla de cambiar dinámicamente el destino de los archivos, por ejemplo: "queremos que cada usuario maneje sus propios archivos y no pueda ver los de los demas", gracias y un saludo.

Imagen de Balú

En realidad nunca lo he hecho ni leido. Pero con PHP, ó el lenguaje de servidor que uses, lo puedes hacer. Pienso que podias cambiar la ruta al archivo de configuración... en lugar de ser fckconfig.js puede ser fckconfig.php y según el usuario se muestre la variable  que contenga el path respectivo. Esta es una idea, habría que ver como se desarrolla.Saludos. 

Imagen de Uriel
Uriel

Hola Balú!! Oye... la verdad que buen blog, pero tengo una duda: después de haberle movido a todo lo que indicas ya me dice "la imagen ha sido subida", pero no se ve (sale la tachita roja). Yo supongo qué es por que no tengo creada la carpeta UserFiles... pero para empezar: ¿en donde debe estar ubicada esta carpeta? Mil Gracias!!!!

Imagen de Uriel
Uriel

Ya ví: la carpeta debe estar en la raíz de la página

Imagen de Uriel
Uriel

Me encontré con otro error para php que quiero compartirles: Al subir un archivo, no podías volverlo a ver después de subirlo. Esto es un bug y las correciones las obtube de una de las p{aginas oficiales. Este es el link: http://sourceforge.net/tracker/index.php?func=detail&aid=1414115&group_id=75348&atid=543655También adjunto las correciones directamente. Se hacen en el archivo upload.phpLine 68:Original:$sServerDir = GetRootPath() . $Config["UserFilesPath"] ;New:$sServerDir = GetRootPath() . $Config["UserFilesPath"] . $sType . "/";Line 93:Orginal:$sFileUrl = $Config["UserFilesPath"] . $sFileName ;New:$sFileUrl = $Config["UserFilesPath"] . $sType . "/" . $sFileName ;

Imagen de yeison
yeison

Hola...Necesito q alguien por favor me puedo guiar en la configuración de FCKeditor para subir imagenes...Realizo todo el procedimiento indicado en la III parte de manual pero resulta q cuando indico examinar para cargar una imagen se queda en un loop mostrando este mensaje "Upload a new file in this folder (Upload in progress, please wait...)"...Tengo una carpeta llamada aplicación local denominada asi http://localhost/aplicaciones/FCK/ en donde tengo un index en el cual creao el textarea con PHP, es descrompimi el FCKeditor2.2b.zip, cambien el nombre de la carpeta i adicione un index.php, nada mas, pero no se en q parte debo crear la carpeta de USERFILES.Les agradezco su enorme ayuda.

Imagen de yeison
yeison

Hola...Necesito q alguien por favor me puedo guiar en la configuración de FCKeditor para subir imagenes...Realizo todo el procedimiento indicado en la III parte de manual pero resulta q cuando indico examinar para cargar una imagen se queda en un loop mostrando este mensaje "Upload a new file in this folder (Upload in progress, please wait...)"...Tengo una carpeta llamada aplicación local denominada asi http://localhost/aplicaciones/FCK/ en donde tengo un index en el cual creao el textarea con PHP, es descrompimi el FCKeditor2.2b.zip, cambien el nombre de la carpeta i adicione un index.php, nada mas, pero no se en q parte debo crear la carpeta de USERFILES.Les agradezco su enorme ayuda.

Imagen de juanvivo
juanvivo

No soy capaz de que me funcione el administrador de archivos. No se visualiza nada en el servidor. He probado a crear 3 carpetas distintas en cada uno de los niveles en el servidor, por si era la ruta lo que tenia mal. Una carpeta UserFiles en el directorio raiz, otra en un nivel superior, que es donde se encuentra el grueso de la pagina, y una tercera en la carpeta del editor, cada una con una imagen distinta dentro, y ninguna se visualiza en el administrador... Que hago mal? he modificado los archivos config.php como dice el tutorial...

Imagen de uriel
uriel

¿Ya aplicaron el parche necesario (comentario 12 de este blog)? ¿Cambiaron las propiedades de la carpeta 'UserFiles' para que se pueda leer y escribir (a 777)? ¿Descomentaron las rutas de la extención que están usando y comentaron las que no? (po ejemplo descomentar:FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/php/connector.php' ;  si estas usando php.

Imagen de kvieres
kvieres

Parece que a alguien se le olvido documentar que este archivo tambien debe ser modificado FCKeditoreditorfilemanagerrowserdefaultconnectorsphpconfig.php Dicho archivo  es el que permite que a la hora de listar las imagenes las cargue correctamente.Ejemplo: Linea 27: $Config['UserFilesPath'] = '/extension/UserFiles/' ; Para los que  tienen duda con la carpeta UserFiles, este es el orden:htdocs/extension/UserFiles Ahi es donde deben poner UserFiles, dentro de esta carpeta el script se encarga de gestionar para crear 3 carpetas y discriminar entre Imagenes, Flash o media.

Imagen de menyei
menyei

Tengo la siguiente inquietud: Estoy haciendo un formulario en cual ingreso informacion con el editor FCK, tomo la información, la almaceno en BD Mysql y luego genero un archivo *.htm desde una plantilla, cuando lo visualizao en local, es decir directamente en el sitio local tomando la informacion de la BD me permite visualizar las imagenes, y la direcccion del archivo p. ej.: es http://localhost/UserFiles/Image/logo_ds.png, pero cuando abro directamente el documento *.htm generado, no me muestra la imagen me sale como ubicacion del archivo asi file:///C:/UserFiles/Image/logo_ds.png y no me muestra la imagen.me pueden colaborar por favor ...

Páginas

Dejar comentario

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