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.
Si te gustó este artículo también te gustará...
Hola BalúHe seguido tus pasos, pero no suben las imagenes, hay algo mas que pudieras mencionar para lograr que subanGracias
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.
Al igual que el mensaje anterior, segui los pasos pero el administrador para subir imagenes no funciona, que pude ser?
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.
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:
Gracias de nuevo.
orale pos la neta muy chido mi cuate
PREGUNTA.. EN EL FCKconfig se puede fijar una cantidad de caracteres fija ??
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
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??
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
Hola. Hay alguna forma de subir los archivos a uuna ruta exacta, para que queden www.dominio.com/userfiles/imagen.jpg ?
Agradeceria una respuesta.
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.
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?
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.
Hola, Agradecería mucho me dijeras como solucionaste la subida de imágenes en el fckeditor. Gracias.
Creo que no hay una opción directa e FCKconfig para poder hacerlo. Puedes escribir algo de código javascript por tu cuenta, para limitar el número de caracteres.
http://www.mediacollege.com/internet/javascript/form/limit-characters.html
O con CKEditor, utilizar un plugin.
http://cksource.com/forums/viewtopic.php?f=11&t=18032
Saludos!
Amigo sabes como activar el examinar en ckeditor
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.
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.
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.
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.
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!!!!
Ya ví: la carpeta debe estar en la raíz de la página
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 ;
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.
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.
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...
¿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.
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.
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