Migración a TinyMCE 3.x

Hola Pedro: hace poco tuve que hacer una actualización de TinyMCE en otro proyecto.

Creo que lo mejor sería hacerlo así:

• Subo a trunk la última versión de TinyMCE (exe/webui/scripts/tinymce_3.5.4.1, por ejemplo). Verás que esto ya lo he hecho… Esa es la versión de Moxiecode: TinyMCE sin cambios.
• Subo los paquetes de idioma de Moxiecode (también están subidos).Esa carpeta (“tinymce_3.5.4.1”) está en el control de versiones, pero debe excluirse al empaquetar la aplicación.
• En mi equipo, cambio la ruta a TinyMCE tinymce_3.5.4.1/… en lugar de tinymce/… Así trabajo con la última versión.
• Voy corrigiendo problemas (serán pocos) y los subo al control de versiones. Así sabemos qué cambios hay que hacer para que los plugins de Moxiecode funcionen.
• Se documentan esos cambios para futuras actualizaciones (aunque ya estén en el control de versiones).
• Se suben los plugins propios (eXeMath, paste code…) al control de versiones.
• Se corrigen si es necesario.
• Por último, hacemos que eXeLearning use esa versión en lugar de la anterior.

Creo que no tiene sentido subir la última versión de TinyMCE sobre la actual en SVN. Tiene muchísimos cambios. El punto de partida es una versión de TinyMCE, y los cambios a registrar (los que un desarrollador debe conocer) son los cambios sobre ese código, nada más.

El proceso de migración no es tan complicado, así que si hay una nueva versión de TinyMCE, repetiríamos el proceso. Un vez que esté bien documentado, sería muy rápido.

Lo había organizado así, pero si os parece mal, lo rehago como dice Pedro. Ya he empezado, y está resultando más fácil de lo que esperaba (al menos de momento).

Saludos.

Un par de temas a tener en cuenta (aunque seguramente ya seréis conscientes de ello):

1. Respecto de otras aplicaciones, en eXe hay un tema especial en el uso de Tiny: la gestión de archivos.
2. Hace poco he trabajado con el Tiny de Moodle 2.x y el plugin de fórmulas es dragmath. Auque me ha parecido mejor que el de eXe, habría que contemplar la manera de hacerlo compatible con contenidos existentes.

¡Un saludo!

Informe sobre el estado de la actualización a TinyMCE 3.x y propuesta de procedimiento:

A partir de la próxima release, la ruta al editor WYSIWYG y a su archivo de configuración se definirá en common.js.

De esta forma, los desarrolladores (o cualquier usuario interesado en hacerlo) podrán trabajar con el editor que quieran.

Si quieren volver a usar el editor que eXeLearning tiene por defecto, bastará con que restablezcan las rutas en common.js

Ventajas:

• Se puede usar el editor que se quiera (no sólo TinyMCE; se podría usar otro).
• Se puede cambiar de un editor a otro fácilmente sin necesidad de renombrar carpetas ni compilar.
• Se evitan problemas de caché habituales al trabajar con TinyMCE.

El paso a TinyMCE 3.x no es tan complicado como esperaba.

Lo más difícil es darse cuenta de qué cadenas de código espera eXeLearning para incluir los archivos en el paquete elp o las exportaciones.

Sabiendo eso, lo único que hay que hacer es conseguir que TinyMCE genere ese código.

Ejemplo:

eXeLearning espera <object type=”application/x-shockwave-flash” data=”…,no <object width=”…” height=”…” data=”…” type=”application/x-shockwave-flash”>;de manera que hay que cambiar el código que devuelven algunos plugins.La conversión no siempre es tan sencilla…

Plugins

Plugins que funcionan perfectamente: si no me equivoco, todos excepto media, pastecode y exemath.

• Arreglar pastecode es fácil.
• Media es más complicado. Propongo hacer un plugin media propio (yo me encargaría). Ese plugin devolvería el código que necesitamos para que eXeLearning incluya los archivos. De momento, sería algo más sencillo que el plugin media de TinyMCE (tal vez sin pestaña avanzado, etc.). Permitiría seleccionar el archivo, especificar las dimensiones (salvo para mp3) y editar el código HTML. ¿Os parece bien hacerlo así?Una pregunta más relacionada con el reproductor que se está utilizando en estos momentos: no permite ver flv en local (al menos yo no he podido, y lo he probado en tres equipos con SO distintos). ¿Os parecería bien usar otro reproductor (pienso en JWPlayer, también de código abierto)? De todas formas, esto todavía no es seguro. Sigo haciendo pruebas. Por supuesto, si se cambiase se mantendría la compatibilidad con elp antiguos, etc.
• exemath: aquí hay más problemas. He estado viendo el código del original y el del TinyMCE de TodoFP, pero ninguno de los dos funciona. Habrá que rehacer parte de ese plugin para que funcione correctamente.Dado que este plugin lo usan menos usuarios que media, creo que lo mejor es centrarse en arreglar los otros y después dejar bien éste.

Los pasos a seguir serían:

1. Adaptar o rehacer media.
2. Adaptar pastecode.
3. Adaptar o rehacer exemath.

Creo que haciéndolo así las futuras actualizaciones de TinyMCE serían mucho más sencillas:

1. Actualizamos TinyMCE.
2. Sustituimos media por exemedia.
3. Añadimos el resto de nuestros plugins (pastecode, exemath).
4. Comprobamos que todo funciona y corregimos lo que haga falta (sólo debería ser necesario tocar nuestros plugins).

Por favor, decidme qué os parece.Si estáis de acuerdo, sigo trabajando en TinyMCE 3.x para la próxima versión de eXeLearning, y cuando la tenga (en las próximas semanas), la cuelgo aquí para que podáis descargarla y probarla. No tendríais más que descomprimir el zip en la carpeta “scripts” y cambiar el valor de dos propiedades en common.js. Es posible que cuelgue todo sin exemath y que más tarde incorpore ese plugin. Depende de lo difícil que resulte adaptarlo.José Miguel: probaré también dragmath. Gracias.Saludos.

Muchas gracias, Pedro.

Había hecho pruebas con esa versión, pero no funciona ninguno de los dos. La semana que viene haré pastecode y empezaré con media, cuando acabe seguiré con exemath.

• This reply was modified Hace 12 años, 4 meses by  Ignacio Gros.

Hola Ignacio:

Seria un puntazo incluir en el editor una llamada al content.css del estilo actual, para que en tiempo de edicion veamos los conte idos similares a como van a quedar.

Si se pueden testear cosas con la 6.2, avisa.

Es muy buena idea.

La verdad es que eso ya se puede hacer. Un ejemplo:

Sustituyecontent_css : “/css/extra.css”,por content_css : “/css/extra.css,/style/INTEF/content.css”, en tiny_mce_settings.js

Tal vez sería conveniente que las plantillas tuviesen un archivo editor.css que tuviese sólo las definiciones necesarias para TinyMCE. Si ese archivo existiese, se podría hacer que el editor lo cargase automáticamente.

También se podría cargar content.css, pero en muchos casos habría que modificar base.css y content.css para no romper la presentación. Por eso creo que sería más fácil tener editor.css y cargarlo sólo si existe en la plantilla seleccionada.

Creo que se podría hacer un plugin.

Para después de las vacaciones…

Saludos.

Pasos a seguir para probar eXeLearning con TinyMCE 3.5:

• Asegurarse de tener intef6.2. Con versiones anteriores no funcionará todo.
• Cambios a realizar en la carpeta “scripts” del directorio en el que tengáis eXeLearning:
  • Eliminar o renombrar la carpeta tinymce_3.5.4.1 (se incluyó en la versión por error; no tiene los cambios necesarios y algunos plugins no funcionarán).
  • Renombrar common.js (en realidad no es necesario, pero guardamos copia por si queremos recuperar el archivo original).
  • Descomprimir el contenido de este zip en esa carpeta (“scripts”).

Nada más.

Deshacer los cambios

Si queréis volver a utilizar la versión antigua de TinyMCE es suficiente con que editéis common.js y sustituyáis esto:

var eXeLearning_settings = { wysiwyg_path : “/scripts/tinymce_3.5.4.1/jscripts/tiny_mce/tiny_mce.js”, wysiwyg_settings_path : “/scripts/tinymce_3.5.4.1_settings.js” }

Por esto:

var eXeLearning_settings = { wysiwyg_path : “/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js”, wysiwyg_settings_path : “/scripts/tiny_mce_settings.js” }

Como veis, ahí se definen las rutas al editor y a su archivo de configuración; así que se podría usar cualquier editor/configuración, y cambiar de uno a otro es muy fácil.

Avisos

• Pruebas hechas con Ubuntu 11 y Windows (Vista y XP). Con Mac no he probado.
• El plugin media funciona, pero de momento sólo admite swf, flv y mp3. Podrá admitir otros formatos más adelante.

Temas pendientes para septiembre

• Corregir todos los fallos que surjan. Sugiero que apuntéis todo lo que veáis y que lo enviéis a primeros de septiembre, que es cuando se retomará el desarrollo. Si no, es posible que este hilo se convierta en algo realmente difícil de seguir.
• Recuperar el comportamiento del plugin advlink que permitía seleccionar otras páginas del elp (y sus anclas) para insertar fácilmente enlaces a las mismas.
• Mejorar media para que admita otros formatos. ¿Incluimos ya HTML5 video/audio?
• Incluir otros plugins. ¿Incluimos “emotions”? Tal vez algún plugin de MathML… ¿Sugerencias?
• Mejorar/Crear otros plugins (facilitar la inclusión de pies de foto y enlaces a diferentes tipos de licencia, por ejemplo).

Traducciones

• Adjunto el “language_pack” de TinyMCE para que podáis revisar la traducción al euskera. Es el paquete original descargado de tinymce.com, así que lo mejor sería que además de adjuntarlo revisado en este hilo se subiese allí para que más personas puedan usarlo.
• Nosotros revisaremos la traducción al castellano.
• Además de ese pack, faltan las traducciones de algunas cadenas en:
  • exemath/langs/eu.js
  • media/langs/eu_dlg.js

Eso es todo.

Espero que funcione. Raro sería que no hubiese que corregir nada. De todas formas, creo que se ha avanzado bastante, y a partir de ahora actualizar la versión de TinyMCE en eXeLearning será más sencillo.

Documentaré todo una vez que corrijamos los fallos.

Nos vemos en septiembre.

¡Buen verano!

Hola a todos. 

Soy un novato del eXe y estoy intentando ejecutar el Plugin spellchecker en el TinyMCE 3.5 que Ignacio ha tenido la amabilidad de ponerlo para testear.

Mi objetivo es tratar de tener el corrector catalan en eXe y he pensado que una aproximación seria el plugin spellchecker….y creo que casi lo consigo. 

Esto es lo que hice:

1. Actuaizar el TinyMCE según el procedimiento de Ignacio (por cierto, tuve que renombrar las carpetas igual que los originales para que funcionase bien…estoy en Mac)

2. Bajar el paquete de spellchecker de la pàgina oficial de Tiny

3. Copiar a la carpeta /Applications/exe.app/Contents/Resources/exe/scripts/tinymce/jscripts/tiny_mce/plugins

4. Modificar el archivo /Applications/exe.app/Contents/Resources/exe/scripts/tinymce/jscripts/tiny_mce/plugins/spellchecker/config.php i dejar descomentado la opción $config[‘general.engine’] = ‘GoogleSpell’;

5. Modificar el fichero /Applications/exe.app/Contents/Resources/exe/scripts/tiny_mce_scripts.js y añadir (en negrita):

plugins : “autolink,lists,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,exemath,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks,pastecode,inlinepopups,spellchecker“,

theme_advanced_buttons3 : “tablecontrols,|,code,help,|,spellchecker“,

spellchecker_languages : “+English=en,Spanish=es,Catalan=ca”,

Resultado: Sale el botón spellchecker PERO cuando lo invoco me sale una ventana con un simbolo de advertencia pero toda en gris. Creo que el problema es con en engine…que no lo encuentra, pero a partir de ahí no sé que mirar más.

Alguna idea¿?

El plugin que se puede descargar desde http://www.tinymce.com/download/download.php es para PHP, y eXe no está desarrollado en PHP, por eso no funciona. ¿Muevo la conversación a corrector catalán?

Espero que en el futuro podamos ir incorporando información para desarrolladores en el apartado Documentación. De momento, dejo aquí las instrucciones para actualizar TinyMCE en versiones de eXeLearning intef6.2 y superiores (con TinyMCE > 3.5).

La próxima versión del programa tendrá la última versión de TinyMCE.

Gracias 🙂

No puedo linkar un video youtube con esa version de pruebas  de TinyMCE. Sois conscientes de que no funciona? (se me culga cuando insero el link).

Saludos.

He hecho el procedimiento para insertar vídeo de You tube. Os dejo enlace a vídeo http://www.youtube.com/watch?v=08Kkn8QX9Qg&feature=youtu.be

En cualquier caso, Ignacio y Pedro, anotamos para solucionar el tema de la ventana que queda por debajo del vídeo como podéis ver en el screencast

¿Tú cómo lo hace XaRz?

Veo que los vídeos se insertan bien. Anotado lo otro. Lo he comunicado en los foros de TinyMCE. De todas formas, se puede solucionar usando el modo pantalla completa.

Si lo corrigen, perfecto. Si no, si se considera importante, podemos intentar solucionarlo desde eXe.

Hola Antonio, 

Yo hago exactamente como tu. Pero a mi se me cuelga. Podria ser algo de la versión MAC? lo hago con la intef 6.2. La intef 6.1 no se me cuega y si que enlaza pero no previsualiza.

Saludos,

He intentado bajar el archivo zip desde el acceso que ponias y nada.

“Cambios a realizar en la carpeta “scripts” del directorio en el que tengáis eXeLearning:

• Eliminar o renombrar la carpeta tinymce_3.5.4.1 (se incluyó en la versión por error; no tiene los cambios necesarios y algunos plugins no funcionarán).
• Renombrar common.js (en realidad no es necesario, pero guardamos copia por si queremos recuperar el archivo original).
• Descomprimir el contenido de este zip en esa carpeta (“scripts”).”

¿Puedes volverlo a poner?

Gracias

Hola Axel.

La versión que encontrarás en el apartado Descargas ya tiene TinyMCE 3.5.