AOWS

Just another adrian’s weblog

Utilizar <span> en lugar de <font> en TinyMCE

with one comment

TinyMCE

TinyMCE es uno de los editores WYSIWYG más utilizados (sin ir más lejos es el que lleva incorporado WordPress), está hecho por completo en JavaScript, es open source y con licencia LGPL (vamos, que se permite incorporarlo en aplicaciones comerciales).

La principal ventaja es, por supuesto, dotar al usuario de un entorno más familiar, semejante a Word y lejos de las aberrantes etiquetas HTML. Pero todo lo demás son problemas y dolores de cabeza, comenzando por su tamaño (sólo el javascript principal pesa 150kb, y eso que está comprimido) y terminando por “tonterías” como el intentar cambiar las obsoletas etiquetas font por span.

En la documentación nos indican que para hacer la sustitución debemos establecer la opción convert_fonts_to_spans a true:

[javascript]
tinyMCE.init({
convert_fonts_to_spans: true
});
[/javascript]

Así, el editor nos hace la conversión automáticamente tal y como queríamos, pero sólo a la hora de enviar y procesar el formulario. Mientras estamos editando internamente sigue utilizando font para evitar, como no, incompatibilidades según usemos un navegador u otro (Gecko puede trabajar con spans, IE no). De esta forma, lo que vemos en la edición luego no se corresponde exactamente con el resultado obtenido, perdiendo todo el sentido de utilizar el editor.

Para mayor desgracia, la opción de cambiar el tamaño según el size de la etiqueta font, y de esa manera simular la misma salida:

[css]
font[size=3] { … }
font[size=4] { … }
[/css]

tampoco lo soporta IE.

Después de una tarde analizando la situación, buscando soluciones alternativas y probando opciones por doquier, conseguí hacer un pequeño parche (con Firebug es todo mucho más fácil). El remedio pasa por modificar el código fuente, añadiendo a este trozo de código:

[javascript]
case “FontSize”:
this.getDoc().execCommand(‘FontSize’, false, value);

if (tinyMCE.isGecko)
window.setTimeout(‘tinyMCE.triggerNodeChange(false);’, 1);

return;
[/javascript]

dos líneas de forma que quede así:

[javascript]
case “FontSize”:
this.getDoc().execCommand(‘FontSize’, false, value);

if (tinyMCE.getParam(“convert_fonts_to_spans”))
tinyMCE.convertFontsToSpans(this.getDoc());

if (tinyMCE.isGecko)
window.setTimeout(‘tinyMCE.triggerNodeChange(false);’, 1);

return;
[/javascript]

forzando de esta manera la conversión a span al establecer el tamaño de la fuente. Qué sencillo, ¿verdad?

Está testeado en Firefox 2.0.0.6 y en IE 6 y 7.

Written by adrian

14 agosto, 2007 a 08:50

Publicado en Posts

Tagged with ,

Una respuesta

Subscribe to comments with RSS.

  1. buscando en la web me tope con esto y es de gran ayuda para mi pero existe otro problema, lo que requiero es que dentro de los valores del tamaño del combo pueda utilizar otros valores para el tamaño de la fuente, requiero que en ves de que sean 7 valores me muestre 10 por defecto y estos valores sean diferentes a los que trae cargados no se si se pueda realizar esto que intento hacer ya que he modificado completamente los valores y siempre me carga los que trae que son 8,10,12,14 etc espero me puedan ayudar a resolver este problema ya que es de suma importancia

    Jose Sosa

    5 diciembre, 2007 at 01:37


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: