Los editores de textos Javascript, son muy útilos para incluir en un formulario de una página web y así darle la opción al usuario de la página disponer de un editor de textos similar a Microsoft Word.
tinyMCE es un popular editor de textos online del tipo WYSIWYG, muy usado su versión libre en aplicaciones web open source como: Joomla! y Wordpress. WYSIWYG significa 'What you see is what you get', es decir, lo que usted ve es lo que consigue.
En este artículo, veremos cómo incluir el editor de textos tinyMCE en una página web que emplea AJAX, de modo de proveer una mejor experiencia al usuario o visitante y así mejor su experiencia.
tinyMCE está libremente disponible para usarlo en nuestras aplicaciones web. Generalmente, este editor de texto Javascript se asocia a algún elemento de un formulario HTML.
Configurar tinyMCE
Simplemente desde el código Javacript incluimos las siguientes líneas:
tinymce.init({
selector: 'textarea',
height: 400
});
Y con esto, se mostrará el editor WYSIWYG en lugar de la textarea y funcionará cuando el formulario HTML se envíe por los métodos: POST y GET.
El código anterior no enviará los datos si el formulario hace uso de AJAX. A continuación, examinaremos cual es la forma de configurar tinyMCE para que funcione con AJAX.
¿Cómo Configurar tinyMCE con AJAX?
El editor TinyMCE se configura para reemplazar un cierto elemento de un formulario HTML, en general ese elemento se trata de una textarea.
La acción que hace tinyMCE tras bambalinas es ocultar el elemento de formulario asociado (textarea) y en su lugar desplegar un iframe donde se vierte la salida del editor.
Así, cuando el formulario es enviado por el método convencional (sin AJAX), TinyMCE automáticamente transfiere el contenido del iframe y lo coloca en la textarea. Sin embargo, cuando el formulario se envía usando AJAX, el editor no hace esta sustitución sino que debemos indicárselo explicitamente.
Para tal efecto, podemos establecer ese comportamiento en el setup del editor del siguiente modo y así ya no tendremos problemas con el envío de la data del formulario por AJAX:
tinymce.init({
...,
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
Si se usa el plugin de jQuery* llamado 'form' y no tenemos la opción de cambiar el setup de TinyMCE, entonces la alternativa para resolver este problema se encuentra en la propia llamada al plugin:
$('form').bind('form-pre-serialize', function(e) {
tinyMCE.triggerSave();
});
Conclusión
No se puede negar que mejorar la usabilidad de una aplicación web, mejora considerablemente su adopción por parte de los usuarios, en especial cuando se incorporan mejoras tan sencillas como la inclusión de un editor de textos WYSIWYG y su empleo usando AJAX. De manera, que el usuario sienta a la aplicación web similar a su aplicación de escritorio.
Enlaces relacionados
- Sitio web oficial de tinyMCE: https://www.tinymce.com/, https://github.com/tinymce/tinymce.
- Usando tinyMCE en una textarea: http://stackoverflow.com/questions/2122085/jquery-and-tinymce-textarea-value-doesnt-submit.
- Enviando los valores de una textarea asociada con tinyMCE y usando AJAX: http://stackoverflow.com/questions/14393512/tinymce-textarea-and-post-form-using-ajax.
