Introducción a TinyMCE el editor WYSIWYG mas avanzado para la Web

 in Web Development  tagged javascript / tinymce / wysiwyg by

TinyMCE es uno de los editores de texto WYSIWYG mas avanzadas, WYSIWYG es el acronimo a What You See Is What You Get o en español Lo que ves es lo que obtienes, para hacer referencia a aquellos editores de texto de formato rico, en el cual es posible cambiar el tamaño, tipo y color de las letras, incluir imágenes y mucho mas.

Puedes encontrar mas información, descarga y documentación en la pagina oficial https://www.tinymce.com/ en este articulo dare una introducción sobre sus características y uso básico.

Para manejar TinyMCE solo es necesario incluir el archivo tinymce.min.js, es decir un archivo Javascript, por lo cual todas las opciones y configuraciones se implementan usando Javascript.

Características

tinymce

TinyMCE se distribuye en 2 versiones, la version libre y gratis y una version enterprise para empresas.

TinyMCE Comunity

La version gratis cuenta con características generales, es decir, estas características también están incluidas en la version enterprise.

  • Archivo: Nuevo documento, imprimir
  • Edición
    • Undo y Redo
    • Cortar, copiar, pegar (con formato), pegar sin formato
    • Seleccionar todo
    • Buscar y reemplazar
  • Insertar
    • Imagen o video
    • Enlaces
    • Caracteres especiales
    • Fecha
  • Formato
    • Cabeceras: h1 – h6
    • Inline: Negritas, itálica, subrayado, superrayado, tachado, …
    • Bloques: div, párrafo, blockquote, pre
    • Alineación: derecha, izquierda, centrado, justificar
  • Tablas
    • Insertar tabla
    • Celda
    • Filas: agregar, eliminar y mezclar
    • Columnas: agregar, eliminar y mezclar
  • Herramientas
    • Ver código fuente

TinyMCE Enterprise

  • Copiar y pegar mejorado con PowerPaste
  • Manejo de archivos con MoxieManager
  • Verificación de escritura con Spell Checker PRO
  • Soporte personalizado

Tanto para la version Community como para la version PRO se incluyen soporte de temas, plugins y multilenguaje

Ejemplo de uso

A continuación dejo un pequeño gist para que vean un ejemplo de uso básico usando el CDN de TinyMCE


<!DOCTYPE html>
<html>
<head>
<title>Probando TinyMCE</title>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea></textarea>
</body>
</html>

view raw

tinymce1.html

hosted with ❤ by GitHub

Normalmente el textarea debe ir dentro de un formulario, con un botón de submit, para guardar los daos en la base de datos recomiendo usar un campo tipo text y no un varchar, para guardar los datos html en php es necesario usar la función hmtlspecialchars.

Empresas

Algunas empresas que confían y utilizan TinyMCE son: WordPress (Si el editor de WordPress es tinyMCE), Evernote, Microsoft, IBM, LinkedIn entre otros.

Conclusion

TinyMCE es un excelente plugin que no debe faltar en nuestro repertorio.

Personalmente pienso que la version Community abarca un rango de necesidades generales y la documentación esta genial por lo que solo recomendaría la version PRO en casos muy importantes.

Tambien empezare a incluir TinyMCE en algunos de mis proyectos como Yibun, ZARD CMS, entre otros.

Leave a comment