Para los que no conozcais el TinyMCE os comentaré que es un editor de contenido hecho en javascript que permite dar formato al texto introducido en un campo. Permite poner el texto en negrita, cambiar el tipo de letra, el color, añadir links…es algo así como un Word para páginas web. El inconveniente de estos editores es que son un arma de doble filo en manos “inexpertas” ya que, tras ese bonito editor, no deja de haber un código en HTML que “representa” el contenido que el usuario introduce. Eso significa que si copias texto de una página web y lo pegas directamente en el editor, estarás también copiando los estilos, las llamadas a funciones javascript y es probable que html mal construido.

Yo hace ya unos cuantos años implementé un editor así en mi trabajo (cuando los iframes empezaron a surgir) que sorprendió gratamente a mis jefes porque en aquella época lo más exótico que podías encontrar era un aburrido textarea. Pero si comparamos el editor que hice yo y el TinyMCE…pierdo la batalla y directamente la guerra :) .

Pero en lo que sí le gané fue en velocidad, y es que nuestro querido TinyMCE tarda mucho en cargar y es que tanta virguería suponen muchas líneas de javascript. Pensareis que soy un poco exagerado, pero cuando te esperas que salga una página “instantaneamente” y te encuentras que se demora varios segundos en cargar, os aseguro que se puede hacer muy pesado navegar (y si la conexión de internet deja bastante que desear pasa directamente a ser desesperante). Pero los chicos de TinyMCE, conscientes del problema, han desarrollado un compresor que promete reducir la espera en un 75% y…la verdad es que funciona :) . Además lo encontraremos desarrollado en diferentes lenguajes (PHP, que es el que usaremos para la explicación, ASPX, JSP y ColdFusion). Para poder hacer uso de este compresor solamente tendremos que bajarlo de su web (ellos recomiendan que bajemos la versión de compresor que se corresponda con el TinyMCE que tienes instalado, así que si tienes una versión anterior de este, tendrás que actualizarlo). Una vez bajado y descomprimido el fichero copiaremos los ficheros tiny_mce_gzip.js y tiny_mce_gzip.php a la carpeta donde tengamos el fichero tiny_mce.js. Una vez copiados ese par de ficheros tendremos que irnos al código de la página donde hacemos la llamada a la librería tiny_mce.js y sustituir esa llamada haciendo referencia al nuevo fichero tiny_mce_gzip.js. Es decir, si tenemos esta etiqueta <script>:

<script type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

Debemos sustituirla por

<script type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce_gzip.js"></script>

Una vez hecho esto tendremos que, además de tener la llamada a la función de inicialización tinyMCE.init, añadir una nueva llamada a la función tinyMCE_GZ.init:

<script type="text/javascript">

tinyMCE_GZ.init({

    plugins : "style,layer,table,...",

    theme : "advanced", language : "es",

    disk_cache : true, debug : false

    });

</script>
<script type="text/javascript">

    tinyMCE.init({

    //aquí seguiría el código de tu antigua inicialización

    });

</script>

Las dos llamadas han de estar en dos etiquetas <script> separadas (como en el ejemplo), no pueden ir en la misma. Y recordad que los plugins que tengáis en una llamada los debéis tener en la otra (yo no lo hice y os puedo asegurar que falla :) ).

En esta dirección podéis encontrar la explicación en inglés: TinyMCE Compressor PHP.

La verdad es que sólo lleva 5 minutos hacerlo y merece la pena, la diferencia es considerable.

Share