FCKeditor (II Parte): Dando el Valor Agregado
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.
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
- responder
Enviado por Gabriel (no verificado) el Jue, 02/16/2006 - 08:52.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.
- responder
Enviado por juanfra_85 (no verificado) el Dom, 04/06/2008 - 15:53.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!!!!
- responder
Enviado por Alex (no verificado) el Lun, 03/24/2008 - 19:40.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?
- responder
Enviado por Shago (no verificado) el Mié, 07/02/2008 - 00:59.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
- responder
Enviado por Anonymous (no verificado) el Vie, 07/04/2008 - 15:35.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.
- responder
Enviado por Balú (no verificado) el Jue, 02/16/2006 - 22:27.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
- responder
Enviado por Gabriel (no verificado) el Vie, 02/17/2006 - 10:23.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.
- responder
Enviado por Balú (no verificado) el Sáb, 02/18/2006 - 00:44.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
- responder
Enviado por Gabriel (no verificado) el Sáb, 02/18/2006 - 04:45.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.
- responder
Enviado por Rafael Delmonte (no verificado) el Jue, 03/09/2006 - 09:38.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.
- responder
Enviado por Balú (no verificado) el Jue, 03/09/2006 - 11:05.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
- responder
Enviado por harold Valdivia (no verificado) el Sáb, 03/11/2006 - 05:02.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.
- responder
Enviado por Balú (no verificado) el Sáb, 03/11/2006 - 11:27.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
- responder
Enviado por erman (no verificado) el Jue, 06/29/2006 - 18:06.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?
- responder
Enviado por Duilio (no verificado) el Vie, 06/30/2006 - 11:41.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.
- responder
Enviado por Balú (no verificado) el Sáb, 07/01/2006 - 15:44.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.
- responder
Enviado por Arian (no verificado) el Mar, 07/11/2006 - 09:41.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.
- responder
Enviado por Balú (no verificado) el Jue, 08/03/2006 - 10:55.Gracias Balu por esforzarte en ayudarnos.Saludos,Arian.
- responder
Enviado por Arian (no verificado) el Vie, 08/04/2006 - 07:08.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
- responder
Enviado por Arian (no verificado) el Vie, 08/04/2006 - 07:14.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.
- responder
Enviado por Balú (no verificado) el Sáb, 08/05/2006 - 07:47.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?
- responder
Enviado por Arian (no verificado) el Lun, 08/07/2006 - 09:06.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?
- responder
Enviado por Arian (no verificado) el Lun, 08/07/2006 - 11:12.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.
- responder
Enviado por Balú (no verificado) el Lun, 08/07/2006 - 14:01.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.
- responder
Enviado por Ana (no verificado) el Mar, 08/08/2006 - 07:36.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
- responder
Enviado por Arian (no verificado) el Mar, 08/08/2006 - 11:03.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
- responder
Enviado por christian maldonado (no verificado) el Mar, 10/10/2006 - 21:17.Holas Bal
- responder
Enviado por IgNo (no verificado) el Mar, 02/13/2007 - 03:09.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
- responder
Enviado por Julio (no verificado) el Jue, 03/08/2007 - 05:12.Estimados amigos, antes que nada les AGRADEZCO pila porque yo que estoy m
- responder
Enviado por Miguel (no verificado) el Lun, 07/16/2007 - 09:35.Deja tu comentario