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.
Si te gustó este artículo también te gustará...
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?
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?
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.
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.
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
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
Holas Bal
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
Estimados amigos, antes que nada les AGRADEZCO pila porque yo que estoy m
Estimados amigos, antes que nada les AGRADEZCO pila porque yo que estoy m
Hola Bal
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!
Hola,No se como funciona muy bien esto ni si me podr
Páginas