Cómo exportar el contenido de TinyMCE a un documento de Word

TinyMCE es un editor WYSIWYG super potente que se suele utilizar en muchas aplicaciones web para convertir un textarea en un editor HTML. Mediante WYSIWYG es súper sencillo agregar un editor HTML en tu sitio web para cualquier entrada de HTML. Pero incluso, hay veces que este editor se queda corto en funcionalidades y debemos extenderlas. Por ejemplo, en muchos proyectos en los que he integrado este plugin, el cliente me ha exigido una función para exportar el contenido del TinyMCE a un documento de Word.

En este tutorial te mostraré cómo agregar la función de exportar a Word en TinyMCE mediante un simple plugin. El plugin ampliará la funcionalidad del editor TinyMCE agregando un nuevo botón que hace todo esto posible.

La gente de CodexWorld ha desarrollado un simple y potente plugin al cual han bautizado con el nombre de ExportToDoc. Este plugin ayuda al usuario a exportar el contenido HTML ingresado en el editor a un documento Word.

El plugin ExportToDoc de TinyMCE

El plugin ExportToDoc agrega un nuevo botón en la barra de herramientas de TinyMCE que hace posible la exportación del contenido a un fichero .doc. Por supuesto, el archivo .doc resultante de la exportación del contenido, lo podrás guardar en tu equipo para posteriores menesteres.

Puedes descargar el plugin ExportToDoc desde aquí.

Instalación

Para habilitar el plugin de TinyMCE ExportToDoc, debes seguir estos pasos:

  • Añade ExportToDoc a la lista de plugins
  • Añade el botón Export To Doc a la barra de herramientas

Ejemplo:

tinymce.init({
    selector: "textarea",
    plugins: "ExportToDoc",
    toolbar: "ExportToDoc"
});

Opciones de configuración

Estos ajustes afectan a la ejecución del plugin ExportToDoc.

etd_file_name

Esta opción te permite especificar el nombre del fichero generado.

Ejemplo:

tinymce.init({
    selector: "textarea",
    plugins: "ExportToDoc",
    toolbar: "ExportToDoc",
    etd_file_name: "tinymce-content"
});

TinyMCE con el plugin para exportar a Word

Este ejemplo añade un editor TinyMCE completo a un textarea con la función de exportar su contenido a Microsoft Word.

HTML

<textarea name="myTextarea" ></textarea>

Javascript

tinymce.init({
    selector: 'textarea',
    height: 300,
    theme: 'modern',
    plugins: [
      'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen',
      'insertdatetime media nonbreaking save table contextmenu directionality',
      'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help',
      'ExportToDoc'
    ],
    toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | ExportToDoc',
    toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',
    image_advtab: true
 });

No olvides que también que también puedes especificar el ID del selector, tal que: selector: #myTextarea.

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP