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á...
Hola Balu.Antes que nada gracias por el manual que publicaste para configura el FCKeditor. Me ha sido muy útil, yo pensaba que para configúralo se necesitaban amplios conocimientos en java y veo que no es así.Ojalá puedes orientarme, resulta que en las opciones para poner imágenes yo deseo que solo se puedan poner imágenes indicando su url y no subiéndolas al servidor, pues si lo hago así puedo agotar el espacio que tengo en hosting. Quiero que en el dialogo de imagen solo se muestre una opción: "información de imagen" y las otras dos "vinculo" y "avanzado" no.He buscado el archivo que muestra el dialogo de imagen y no lo he hallado. ¿Cómo le puedo hacer?Gracias
hola tengo un problema estoy tratando de implementar CKEditor en un Newsletter y al momento de hacer una recarga de la pagina me podifica los links... los dobletea...
primero me muestra asi...
link
todo bien.........
pero si recargo la pagina me lo modifica.....
hola
Buenos días,
Estoy con un proyecto OpencCMS y tengo un problema con el fckeditor en firefox.
Añado una imagen al textarea y se ve sin problemas pero cuando la muevo (drag and drop) me añade ../../ al atributo src de la imagen y me rompe la ruta por lo que la imagen deja de verse.
Creo que la clave esta en el archivo: fckeditorcode_gecko.js. ¿alguda idea?
Saludos y gracias
Excelente la info compañero, TE FELICITO por el esfuerzo y la actitud para compartir esta información
Muy bueno el articulo!
Una consulta, se puede hacer que el "OrderedList" en lugar de poner numeros ponga letras?
Muchas gracias
Saludos desde Uruguay!
Hola amigo, fijate que descargue la Ultima Version de FCKEditor, pero no le he podido implementar en un Proyecto JSP, no me aparece la Pestaña de Cargar Archivos, espero me puedas ayudar.
saludos
En internet explorer puedo editar la botonera, en mozilla se ven todos los controles del fckeditor. Como hago para quitar elementos y que se vean en ambos.?
El problema que he encontrado con el FCKeditor es cuando tratasd de agregar Imágenes usando el Firefox y el Safari.
hola muchas gracias por la ayuda con el fckeditor, y siendo mas abusivo les comento que estoy realizando un pequño blog donde utilizo el editor para que el usuario pueda modificar algunas cosas del blog pero ademas en la parte de los cometarios quiero implementa el editor pero ahy si solo el basic y es alli donde surge mi problema como puedo implementar esto pues no se como en las paginas del autor se quede el default y en la del usuario llege el basic si alguno pudiera colaborarme con esto se lo agradeceria
holaaaaaaaaaa me encanta tu pagina, esta muy buena pero tengo una duda espero me ayudes, necesito dejar preestablecido el tamaño del textarea del fckeditor y yo lo modifico en el fckeditor.js si lo hace bien pero yo quiero q quede estatico es decir q no se muestre scroll ni vertical ni horizontal, si sabes como modificar eso seria de mucha ayuda
Gracias
Minniek
Venezuela
Hola, estoy tratando de hacer un gestor de boletines con el fckeditor y me gustaria saber como puedo hace para que el editor me carge una plantilla, y solo dejar que se pueda modificar sierta parte de la plantilla, y que no se pueda borrar, osea si tengo una plantilla que esta hecha en html como si fuera una pagina web, y quiero que solo puedan modificar el area del contenido y el titulo, todo lo demas no se pueda modificar ni borrar, como puedo hacer esto? gracias
todo esta muy bin de hecho ya lo probe y todo funciona realmente lo que necesito es visualizar documentos RTF en una pagina web que contienen hasta encabezado y pie de pagina con imagenes y todo pero no se de algun visualizador y tampoco se si con el FCKeditor se pueda hacer esto, alguien me puede orientar?
Necesito ayuda con el upload de imagenes... simplemente no me funciona y ya revise el manual para configurar el upload pero aún no funciona... por favor ayuda urgente!!!!
Holas sobre la configuracion del update de imagenes, si es que te envia un error de que no esta configurado aun y no te permite subir imagenes, lo que debes hacer es ir al archivo que el error te indica y buscar declaracion que esta por el inicio y que se encuentra en =false, solo cambiala a =true y se van a crear las carpetas en la raiz de tu host.
espero q ayude ok.
No es necesario que subas las imágenes al servidor, basta que en el campo URL escribas la url de la imagen. Así este en otro sitio web (Flickr por ejemplo) FCKeditor te cargará la imagen. Con respecto a las fichas vínculo y avanzado, no entiendo para que deseas desactivarlos, en realidad son muy útiles. Poner un vinculo en la imagen o poner la etiqueta title (texto alternativo en los navegadores como Firefox que no reconocen la etiqueta alt) son cosas muy utilizadas y que te recomiendo utilices.Saludos.
Hola otra vez.Yo quiero quitarle a la ventana que sube imagenes la opción de subir imagenes al servidor, porque este formulario lo pienso utilizar en un libro de visitas y no quiero que se suban archivos, para no agotar el hosting.Sé que esta opcion se puede inhabilitar o dejar inservible pero yo quiero que no se muestre.Agradezco cualquier idea que me puedas dar.Saludos
Hola Gabriel. Te recomiendo utilices Tiny MCE (es el que uso para estos comentarios por ej.). Con este editor tienes exactamente lo que buscas y es más adecuado para el libro de visitas (por ser más liviano).En realidad cuando me decidí usar FCKeditor en este CMS, fué por la posibilidad de subir imágenes y explorarlas en la web; pero, si se va a omitir esta función, te recomiendo el otro editor. Te recomiendo leas este artículo: ¿Cuál es el mejor Editor Wysiwyg On Line?Si tienes dudas, comentalas. Saludos.
Hola Balú, muchas gracias por contestar. Ya observe el otro editor y creo que ese me va a servir más para mi caso.Gracias
No salgo a camino con la configuración del FCKeditor. He siguido el manual para instalarlo con PHP, pero al hacer la prueba NO consigo nada.
Debes estar cometiendo algún error, pues el artículo de instalación de FCKeditor esta vigente para la actual versión. Si fuera algo más puntual seguro podría ayudar. Saludos.
Hola Balu:Solo decirte que tus manuales no sirven,Mentira, es muy bueno y sencillo, me agrada tu web.Queria hacerte una pregunta y no tiene que ver mucho con el FCKeditor (aun) , Mira estuve implementando un CMS, y la verdad nunca me anime por uno comercial pues me pierdia mucho, con el monton de funciones que tenian. Entonces decidi hacer uno a mi media. El problema es el siguiente: tengo una base de datos en MySql y de mis suscriptores y necesito hacer un modulo que mande boletines(estos los hago con FCKeditor) a estos correos ¿Existe esta funcionalidad en CMS comercial?, no se si podrias ayudarme, o debo implementar mi modulo?Gracias
Por supuesto. No sólo en comerciales, hay varios CMS open source que te permiten enviar newsletters, como por ejemplo Joomla, al cual puedes instalarle el componente newsletters.Pero si tienes una buena cantidad de suscriptores, es preferible que utilices un script que envíe correos por listas. Por ejemplo, he utilizado PHPList aquí en baluart y he enviado mails a más de 1500 suscriptores. Lo único que tendrías que hacer es instalarlo, exportar tu BD de mails a la de PHPList y listo. También es muy fácil de usar. Finalmente, otra alternativa (si no tienes muchos suscriptoreses) como tu mismo haz hecho tu CMS, es que que escribas tu script para envíar mails, tampoco es muy complicado. Saludos.
he configurado el php como dice aca y no logro resultados positivos nadie tiene el archivo modificado...por q de esta explicacion no logro nada..desde ya muchas graces perdonden las molestias
Muy buena esta sucesión de artículos sobre el FCKeditor y tu página en general. Tiene muy buen posicionamiento en google.Mi pregunta es ¿Cómo puedo cambiar la configuración del FCKeditor, para tener una caja con default y otra con basica en el mismo portal, sin necesidad de duplicar el fckeditor. ¿Se puede?
Hola Dulio, si se puede. Tienes que crear una toolbar adicional, además de la default que es la que utilizamos en este artículo por ejemplo y luego llamas a la toolbar pertinente en la página donde quieras mostrarla. Este artículo, aunque en ingles, muestra lo que tienes que hacer.Saludos.
Hola Balú, Primero q todo muchas gracias por estas explicaciones acerca del FCKeditor, un trabajo muy bueno. Ahora tengo un problema, yo descarge la ultima version del FCKeditor, aunq dices q esta guia se aplica para la actual version, no logro quitarle los botones q quiera, cdo del conjunto q dices q hay en la linea 69 FCKConfig.ToolbarSets["Default"] = [ ........] le quito alguno de los q estan ahi, me siguen saliendo todos, mi instalacion es con php.Gracias de antemano.
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.
Gracias Balu por esforzarte en ayudarnos.Saludos,Arian.
Amigo Balu, el enlace anterior q pusiste: http://www.baluart.net/624/descargar-fckeditor-231-para-php.phpEsta roto :(Pero de igual forma no se si sera el mismo q esta en el sitio del FCKeditor, ya yo lo tengo lo q hay algunas variaciones en el codigo con respecto a lo q explicas y aun no he podido configurarlo para q me muestre solamente los botones q deseo.Saludos,Arian
Hola Arian, muchas gracias por el comentario, no me había percatado que el enlace esta roto. Acabo de corregirlo. :-) Por otra parte, recuerden que siempre pueden utilizar el buscador, para encontrar los artículos más recientes sobre algún tema.Saludos.
Páginas