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 saikus
saikus

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

Imagen de saikus
saikus

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

Imagen de djfritzz
djfritzz

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

Imagen de djfritzz
djfritzz

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() ;?>

Imagen de Balú

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.

Imagen de Carlos Zambrano
Carlos Zambrano

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

Imagen de Carlos M
Carlos M

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?

Imagen de Javier

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

Imagen de Andres Gaviri
Andres Gaviri

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?

Imagen de Bal

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

Imagen de Andres Gaviria
Andres Gaviria

OK, muhcas gracias por su respuesta

Imagen de Micaela

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!

Imagen de Micaela

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!

Imagen de Togu
Togu

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...

Imagen de mitubo
mitubo

Alguien sabe c

Imagen de Fabio
Fabio

Encuentro de gran utilidad su art

Imagen de Bal

Fabio descarga la versi

Imagen de Isaias Medina
Isaias Medina

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 

Imagen de Isaias Medina
Isaias Medina

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

Imagen de miguel
Imagen de Naxus
Naxus

Hola buenas, tengo un problema con una versi

Imagen de naxus
naxus

Vamos que lo que necesito es q salga <p></p> en fireFox también por si no quedaba claro anteriormentesaludos

Imagen de naxus
naxus

Vamos que lo que necesito es q salga <p></p> en fireFox también por si no quedaba claro anteriormentesaludos

Imagen de henrique guedes

muy bueno esto materia su trabajo excelente de las ayudas exactamente muy um abraço henrique  

Imagen de Gustavo A

Muy bueno, me fue muy util. alguien probo la version 2.4.2 ?

Imagen de Neurotico
Neurotico

Hola, tengo un problemilla con el editor, estoy trabajando la versi

Imagen de Ivan
Ivan

Hola, tengo un problema y es que cuando por c

Imagen de Ivan
Ivan

Felicidades por el tutorial, tremendamente didactico.Agradecer

Imagen de Luis
Luis

Hola, estoy con fckeditor para aspx y consigo cargar imagenes, todo seg

Imagen de Roberto

Ayuda por favor. He seguido los pasos aqu

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