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.

Comentarios

saikus

responder

1 Agosto 2006 - 4:03am

Me gustaría saber como deshabilitar el boton de insertar imagenes, estoy trabajando en aspx THANKS

saikus

responder

1 Agosto 2006 - 4:03am

Me gustaría saber como deshabilitar el boton de insertar imagenes, estoy trabajando en aspx THANKS

djfritzz

responder

1 Agosto 2006 - 8:56am

Hola,Con manual en mano y hecho todas las indicaciones sugeridas en este manual y no he podido subir las imagenes, por lo cual necesito un poco de ayuda.1. en mi servidor tengo en el archivo raiz la carpeta UserFiles con sus respectivas subcarpetas (File, Flash, image) y2. tambien coloque la carpeta UserFiles con sus respectivas subcarpetas (File, Flash, image) en la siguient ruta public_html y luego dentro de la carpeta fck( nombre que le coloque a fckeditor) y tampodo funciona.Nota: en los puntos 1 y 2 ya tienen los permisos 777.les envio el archivo connector.php, por favor mirarlo y decirme que debo modificar <?php /* * FCKeditor - The text editor for internet * Copyright (C) 2003-2005 Frederico Caldeira Knabben * * Licensed under the terms of the GNU Lesser General Public License: * http://www.opensource.org/licenses/lgpl-license.php * * For further information visit: * http://www.fckeditor.net/ * * File Name: connector.php * This is the File Manager Connector for PHP. * * File Authors: * Frederico Caldeira Knabben (fredck@fckeditor.net) */include('config.php') ;include('util.php') ;include('io.php') ;include('basexml.php') ;include('commands.php') ;if ( !$Config['Enabled'] ) SendError( 1, 'This connector is disabled. Please check the "editor/filemanager/browser/default/connectors/php/config.php" file' ) ;// Get the "UserFiles" path.$GLOBALS["UserFilesPath"] = '' ;if ( isset( $Config['UserFilesPath'] ) ) $GLOBALS["UserFilesPath"] = $Config['UserFilesPath'] ;else if ( isset( $_GET['ServerPath'] ) ) $GLOBALS["UserFilesPath"] = $_GET['ServerPath'] ;else $GLOBALS["UserFilesPath"] = '/UserFiles/' ;if ( ! ereg( '/$', $GLOBALS["UserFilesPath"] ) ) $GLOBALS["UserFilesPath"] .= '/' ;// Map the "UserFiles" path to a local directory.//$GLOBALS["UserFilesDirectory"] = GetRootPath() . str_replace( '/', '\', $GLOBALS["UserFilesPath"] ) ;$GLOBALS["UserFilesDirectory"] = GetRootPath() . $GLOBALS["UserFilesPath"] ;DoResponse() ;function DoResponse(){ if ( !isset( $_GET['Command'] ) || !isset( $_GET['Type'] ) || !isset( $_GET['CurrentFolder'] ) ) return ; // Get the main request informaiton. $sCommand = $_GET['Command'] ; $sResourceType = $_GET['Type'] ; $sCurrentFolder = $_GET['CurrentFolder'] ; // Check if it is an allowed type. if ( !in_array( $sResourceType, array('File','Image','Flash','Media') ) ) return ; // Check the current folder syntax (must begin and start with a slash). if ( ! ereg( '/$', $sCurrentFolder ) ) $sCurrentFolder .= '/' ; if ( strpos( $sCurrentFolder, '/' ) !== 0 ) $sCurrentFolder = '/' . $sCurrentFolder ; // Check for invalid folder paths (..) if ( strpos( $sCurrentFolder, '..' ) ) SendError( 102, "" ) ; // File Upload doesn't have to Return XML, so it must be intercepted before anything. if ( $sCommand == 'FileUpload' ) { FileUpload( $sResourceType, $sCurrentFolder ) ; return ; } CreateXmlHeader( $sCommand, $sResourceType, $sCurrentFolder ) ; // Execute the required command. switch ( $sCommand ) { case 'GetFolders' : GetFolders( $sResourceType, $sCurrentFolder ) ; break ; case 'GetFoldersAndFiles' : GetFoldersAndFiles( $sResourceType, $sCurrentFolder ) ; break ; case 'CreateFolder' : CreateFolder( $sResourceType, $sCurrentFolder ) ; break ; } CreateXmlFooter() ; exit ;}?>gracias. Giovanni

djfritzz

responder

1 Agosto 2006 - 8:57am

Hola,ahora les envio el archivo config.php<?php/* * FCKeditor - The text editor for internet * Copyright (C) 2003-2005 Frederico Caldeira Knabben * * Licensed under the terms of the GNU Lesser General Public License: * http://www.opensource.org/licenses/lgpl-license.php * * For further information visit: * http://www.fckeditor.net/ * * File Name: config.php * Configuration file for the File Manager Connector for PHP. * * File Authors: * Frederico Caldeira Knabben (fredck@fckeditor.net) */global $Config ;// SECURITY: You must explicitelly enable this "connector". (Set it to "true").$Config['Enabled'] = true ;// Path to user files relative to the document root.$Config['UserFilesPath'] = '/UserFiles/' ;$Config['AllowedExtensions']['File'] = array() ;$Config['DeniedExtensions']['File'] = array('php','php3','php5','phtml','asp','aspx','ascx','jsp','cfm','cfc','pl','bat','exe','dll','reg','cgi') ;$Config['AllowedExtensions']['Image'] = array('jpg','gif','jpeg','png') ;$Config['DeniedExtensions']['Image'] = array() ;$Config['AllowedExtensions']['Flash'] = array('swf','fla') ;$Config['DeniedExtensions']['Flash'] = array() ;$Config['AllowedExtensions']['Media'] = array('swf','fla','jpg','gif','jpeg','png','avi','mpg','mpeg') ;$Config['DeniedExtensions']['Media'] = array() ;?>

Balú

responder

3 Agosto 2006 - 10:55am

Todos los que no puedan configurar el administrador de imagenes de FCKeditor con PHP, acabo de hacerlo con la última versión 2.3.1. Pueden descargarlo desde este enlace.Descargar FCKeditor 2.3.1 para PHPEspero les sirva.

Carlos Zambrano

responder

15 Septiembre 2006 - 2:23pm

Hola tengo un problema con el Upload del FCK Editor.Necesito subir al server un .PDF de 9Mb. me da el mensaje siguiente.INVALID FILECuando subo un .PDF de 1Mb si lo sube sin problemas

Carlos M

responder

19 Septiembre 2006 - 2:17pm

hola tengo un problema, configure toda la funcion y corrio todo ok. Pero yo lo guardo todo en una bd y luego exporto el contedido a un word q guardo en el disco duro de mi pc. al abrir el archivo no me aparecen las imagenes q colgue en el servidor con la funcion, solo me aparecen si les pongo todo el url completo.Actualmente en ambos archivos config.php he puesto lo siguiente$Config['Enabled'] = true ;$Config['UserFilesPath'] = '/UserFiles/' ;$Config['UserFilesAbsolutePath'] = ''Ya configure tooodo lo q hay en este blog y levante las correcciones, hay algo mas q deba hacer?

Javier

responder

20 Octubre 2006 - 1:27am

Me gustaria saber si se puede configurar el fckEditor para subir im

Andres Gaviri

responder

3 Noviembre 2006 - 2:09pm

bueno esta pregunta ya la hicieron pero no vi que le allan dado respuestami pregunta es: hay forma de eliminar los archivos desde el administrador?

Bal

responder

3 Noviembre 2006 - 4:07pm

Hola Andres, no hay forma de eliminar los archivos desde FCKeditor, simplemente se retira de la p

Andres Gaviria

responder

4 Noviembre 2006 - 8:24am

OK, muhcas gracias por su respuesta

Micaela

responder

20 Noviembre 2006 - 8:17am

tengo una duda, configuré los estilos en el fckstyles.xmly los links lo veo en opera pero no en explorer, asi fue como los llamé <Style name="News Link" element="a"> <Attribute name="class" value="news_link" /> </Style>sabés cual puede ser el problema? o como solucionarlo?Desde ya muchas gracias!

Micaela

responder

20 Noviembre 2006 - 8:17am

Togu

responder

22 Noviembre 2006 - 4:44pm

Yo hice todo lo que el blog propone y aun asi no me funcionaba, la carga de los archivos, entonces travesiando cambie el la siguiente variable:$Config['UserFilesAbsolutePath'] = '';le puse el path completo y si funciono...

mitubo

responder

28 Enero 2007 - 5:41am

Alguien sabe c

Fabio

responder

14 Marzo 2007 - 9:03am

Encuentro de gran utilidad su art

Bal

responder

14 Marzo 2007 - 9:11am

Fabio descarga la versi

Isaias Medina

responder

17 Marzo 2007 - 11:00am

Gracias por el fck, bueno la pregunta es:Tenemos un megaproyecto organizacional, todos los documentos de calidad para ahorrar papel ahora van a ser dados mediante web intranet, es por eso que utilizare el fck, para doc nuevos no tengo problemas, pero ¿como puedo poner doc ya hechos en el fck para modificarse?GRACIAS, Saludos desde Aguascalientes Mexico