FCKeditor (II Parte): Dando el Valor Agregado

baluart13 Agosto 2005 - 7:23pm 43 comentarios
Enviar por Email Imprimir

FCKeditor consta de todas las características que se puede deseear, puede que sea un poco más lento de cargar que el TINY MCE (un par de segundos más), pero como ya lo afirmamos en un post anterior (¿Cuál es el mejor editor Wysiwig On Line?), la ventaja del FCKeditor consiste en su facilidad de subir imágenes, películas flash y archivos al servidor.

Sin embargo, si uno quiere impresionar a un cliente, no podemos mostrar el edtor sin haberlo personalizado primero, hay que darle ese valor agregado, que no nos cuesta mucho, pero que nos diferencia del resto. Este valor agregado es el objetivo de este artículo, en el que vamos a ver como personalizar FCKeditor, a nuestro gusto y con unos simples tips.

Definiendo los Skins

FCKeditor nos birnda 3 skins con los cuales podemos empezar a trabajar, recuerden que no es necesario invertir tanto trabajo en crear un diseño desde cero, cuando ya tenemos algunos listos que podemos modificar.

Los skins son:

  • Default
  • Office2003
  • Silver

Skins que se encuentran dentro de las carpetas de iguales nombres. Por lo que si uno quiere rediseñar los colores de fondo, bordes, dimensiones, etc. Se debe acudir a estas carpetas.

Sin embargo, antes hacer la personalización, debemos elegir el skin de la siguiente manera:

1. Abrir el archivo fckconfig.js, archivo que define el diseño, orden y distribución de los botones del editor, entre otras funciones, desde luego.
2. En la linea 31 del fichero, se encuentra lo siguiente:

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
Lo cual modificamos por lo siguiente si queremos que se muestre el Skin de office2003:
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;
De igual manera, para el Skink Silver
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;

3. Recargamos la página donde esta el editor, y vemos como cambia.

Determinando los Botones del Editor

Ubicar los botones del editor en el orden más adecuado, el que nos proporcione mayor comodidad, es algo que realizamos hasta con el propio MS Word. Por lo que es importante definirlo a gusto del cliente.

Nos ubicamos en la línea 69 del mismo archivo fckconfig.js, en esta línea empezamos a definir los botones que irán en el editor (modelo avanzado "default"), ahora si nosotros queremos mostrar sólo algunos botones del editor, (dependiendo del tipo de instalación que hicimos) lo más simple es:

Si la instalación fue con JavaScript

Abrimos el fichero fckeditor.js y en la línea 29 modificamos:

this.ToolbarSet = toolbarSet || 'Default' ;
por
this.ToolbarSet = toolbarSet || 'Basic' ;

O si fue con PHP

Abrimos el fichero fckeditor.php, y en la línea 39 modificamos la variable ToolbarSet por Basic, en lugar de Default.

Retomando lo dicho, en la línea 69 configuramos el ToolbarSet ‘Default’, las líneas siguientes son las llamadas a los botones, de tal manera que si colocamos el siguiente código

FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
'/',
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['TextColor','BGColor'],
'/',
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','UniversalKey'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button',
'ImageButton','HiddenField'],
['About'],
'/',
['Style','FontFormat','FontName','FontSize']
] ;

Observando el Resultado

Nuestro editor quedaría de esta manera (Skin: Office2003 personalizado):

Modificar el color del editor, es muy simple, bastando con modificar archivo CSS fckeditor, dentro de la carpeta del skin que hayamos elegido.

Teniendo nuestro editor funcionando y personalizado, finalmente nos falta detallar como activar el sistema para subir ficheros (imagenes) a nuestro server y como predeterminar el css que utilizaremos en nuestra web.

Comentarios

Imagen de Arian
Arian

Amigo Balu, esto no me sale ni atras ni alante, yo quiero q me salga solamente los botones q me interesen, yo trabajo con php y para ello trabajo con los ficheros: fckeditor.php y fckconfig.js, segun estuve revisando en el primero defines el tipo de ToolbarSet (Default o Basic) y en el segundo, los botones q tendra cada uno: FCKConfig.ToolbarSets["(Default o Basic)"] = [['Source','DocProps', ...... pero yo le he quitado botones a este ultimo, por ejemplo el 'Source' y cuando vuelvo a recargar la pagina, sale como el primero, a mi entender el tipo no coge los cambios q le digo en el fckconfig.js o no se? el problema es q no me modifica nada, me tiene loco eso. Ya estoy trabajando con el q pusiste para la nueva version.Me ayudas?  

Imagen de Arian
Arian

Es como si el trabajara con otro fichero, pq fijate q creo otra barra de herramientas para hacer una prueba, por ejemplo: en fckeditor.php escribo: $this->ToolbarSet    = 'Custom' ; y en fckconfig.js la defino como: FCKConfig.ToolbarSets["Custom"] = [    ['OrderedList','UnorderedList','-','Link','Unlink',]] ;y me da un error diciendo q esa barra de herramientas no esta definida, es como si ni entrara al fichero fckconfig.js??que crees? 

Imagen de Balú

Hola Arian, creo que no me explique bien. Si estas trabajando con fckeditor.PHP, puedes escoger entre Basic o Default., este último trae todos los botones (recomendado).Así, en el fichero PHP debe estar:$this->ToolbarSet    = 'Default' ;Luego vas al fckeditor.JS. Y en el fichero JS ubicas:FCKConfig.ToolbarSets["Default"] y personalizas los botones como te guste. (Línea 80 aprox.)Si hubieses seleccionado " Basic"en el fichero fckeditor.php, lo que tendrías que adaptar es:FCKConfig.ToolbarSets["Basic"] (Línea 100 aprox.)Te rcomiendo descargues el fckeditor que deje y ahí hagas las pruebas, porque escribí algunos comentarios que pueden serte de ayuda.Espero te sirva, saludos. pdta. cada vez que hagas cambios en el javascript, cierra el navegador para que recargue todo el javascript nuevamente. 

Imagen de Ana
Ana

Necesito su ayuda..... Para trabajar con el PHPList estaba haciendolo con FCKEditor sin embargo este no carga en Safari para Mac y presenta un error en Firefox, por lo que estoy considerando trabajar con TinyMCE la cuestion es que no se muy bien como se agregan templates ahi. Aclarenme un poco la cuestion.

Imagen de Arian
Arian

Pues si Balu, mi insistencia estaba dada en q el browser q uso es el Mozilla Firefox y en ese el tipo no me quiere hacer los cambios, no obstante me volvia loco quitando botones y seguia igual, sin embargo lo probe en el iexplorer y salio perfecto, hasta el color de fondo del browser me sale azulito en el skin office 2003 q era el q queria, con el Firefox me salia beige, pues ese es el problema,Crees q halla alguna forma de q salga bien esos cambios en el Firefox, pq si alguien usa ese browser (como yo) no le va a salir lo mismo. Es como si con el Firefox, ejecutara otra cosa?Saludos

Imagen de christian maldonado
christian maldonado

hola, agradezco mucho por los tutoriales aki posteados, de verdad son de mucha ayuda. Actualmente me encuentro trabajando con el fckeditor para mi proyecto de disertacion de grado en la universidad, me encuentro haciendo un portal para generaci

Imagen de IgNo
IgNo

Holas Bal

Imagen de Julio
Julio

Hola,soy nuevo en esto y estoy intentando generar el editor con javascript. He seguido manual pero cargo la pagina y me divide la pagina en dos bloques y me pone que no puede mostrar la pagina. Puede ser algo de rutas??La pagina que yo estoy haciendo en que ruta la tengo que poner???Muchas gracias

Imagen de Miguel

Estimados amigos, antes que nada les AGRADEZCO pila porque yo que estoy m

Imagen de Miguel

Estimados amigos, antes que nada les AGRADEZCO pila porque yo que estoy m

Imagen de Joan
Joan

Hola Bal

Imagen de masterjare
masterjare

Hola!Yo tengo la barra FCKeditor en un proyecto, como se ve en el diseño tengo una flecha pequeña a la izquierda para visualizar o no la barra. Cuando abro el fichero siempre se visualiza la barra, y me gustaria saber como puedo hacer para que solo se visualizase la flecha y si el usuario quiere utilizar algun boton de la barra, le tenga que dar a la flecha, es decir  a ver si hay un comando para ocultar la barra. Gracias!

Imagen de Jacqueline
Jacqueline

Hola,No se como funciona muy bien esto ni si me podr

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