Hazte Online

pon un poco de informática en tu vida

TinyMCE editor WYSIWYG en Rails

Y el error Failed to load…

Hace poco he tenido que realizar una página donde el usuario pudiera redactar una serie de noticias para que aparecieran en su web. Algo como un Blog.

Al utilizar en la web el Framework Bootstrap de Twitter busqué un editor WYSIWYG para el mismo y empecé a usarlo. Pronto lo descarté por el hecho de que no se podían redimensionar las imágenes que aparecían en el mismo y seguí buscando.

Encontré un editor JavaScript bastante popular, TinyMCE, incluso un tercero desarrolló una gem para usarlo desde Rails, aunque preferí hacerlo a mano y no depender de las actualizaciones de esa gema.

Después de instalármelo y probarlo en local, me iba a la perfección, pero cuando lo subí a producción no me aparecía el editor. Viendo la consola de Firefox me decía Failed to load… varios archivos: el paquete del lenguaje, el skin y los plugins.

Después de mucho rebanarme la cabeza y buscar soluciones que no funcionaban, di con el problema. Os dejo como me lo instalé yo paso a paso:

  • Descargamos TinyMCE 4.0.5. Dentro del archivo descargado extraemos la carpeta /tinymce/js/tinymce en nuestro proyecto app/assets/javascripts/tinymce.

  • Imagino que lo queremos en castellano ¿verdad? Nos descargamos el paquete de español y lo extraemos en app/assets/javascripts/tinymce.

  • Poniendo el caso que solo vamos a utilizar el lenguaje es, el skin por defecto y los plugins image y table, en la vista donde vamos a utilizar el componente debemos poner en las cabeceras (dentro de head):

1
2
3
4
5
6
  =stylesheet_link_tag "tinymce/skins/lightgray/skin.min.css", media: "all"
  =javascript_include_tag "tinymce/tinymce.min.js"
  =javascript_include_tag "tinymce/langs/es.js"
  =javascript_include_tag "tinymce/themes/modern/theme.min.js"
  =javascript_include_tag "tinymce/plugins/image/plugin.min.js"
  =javascript_include_tag "tinymce/plugins/table/plugin.min.js"

Tener en cuenta que utilizo haml.

  • En la parte final de la vista donde esté el textarea que vayamos a utilizar:
1
2
3
4
5
6
:javascript
  tinyMCE.init({
    mode: 'textareas',
    language: 'es',
    plugins: 'image, table'
  });
  • Y por último tenemos que modificar config/environments/production.rb añadiendo:
1
  config.assets.precompile += %w( tinymce/langs/es.js tinymce/themes/modern/theme.min.js tinymce/plugins/image/plugin.min.js tinymce/plugins/table/plugin.min.js tinymce/skins/lightgray/skin.min.css )
  • Una vez en el servidor haremos el precompile de los assets:
1
  $ bundle exec rake assets:precompile RAILS_ENV=production

Y con esto me empezó a funcionar a la perfección. Espero que os sirva de ayuda.

Comentarios