Herramientas para incluir editor WYSIWYG en tu sitio

Un editor WYSIWG puede ser necesario en ciertas páginas, en particular en foros y otras comunidades donde una gran cantidad de personas comparten contenido, opiniones e incluso piden ayuda a otros miembros. Si deseas que los usuarios redacten contenido y tengan la posibilidad de realizar ediciones básicas a sus textos como aplicar negritas o subrayar palabras, entonces necesitas incluir un editor WYSIWYG.

El término “WYSIWYG” proviene del inglés What You See Is What You Get que se puede traducir como “Lo que ves es lo que hay”. De esta manera, estas siglas hacen referencia a editores que poseen una interfaz gráfica, donde los usuarios pueden ver, en tiempo real, los resultados de todas las modificaciones que realizan a su texto.

En este artículo hemos recopilado algunas herramientas que te pueden ser de utilidad si deseas incluir rápidamente un editor WYSIWYG en alguna sección de tu sitio web.

Aloha Editor

Aloha Editor es una librería que posee una funcional API y ofrece las características esenciales de un editor WYSIWYG. Los usuarios pueden copiar texto de Microsoft Word y pegarlo en el editor sin problemas. Además, es compatible en diversos navegadores.

Froala Editor

Froala Editor posee una interfaz limpia y sólo requiere conocimientos mínimos de programación para que puedas incluirlo en tu proyecto. Posee dos estilos de tema: claro y oscuro, que pueden personalizarse mediante LESS. Además se encuentra optimizado para móviles.

Requiere jQuery y FontAwesome, así que asegúrate de incluirlos en tu archivo HTML si decides hacer uso de Froala Editor.

Yellow Text

Yellow Text es un plugin para jQuery ligero. Se centra en la simpleza y por ello ofrece un entorno gráfico limpio que presenta sólo las opciones básicas para edición de texto. Si se adecúa a tu proyecto puedes instalar este plugin rápidamente (en tan sólo 3 pasos).

Redactor II

Redactor es un editor de texto con un diseño limpio para mejorar la experiencia de usuarios. Posee funcionalidades “drag and drop” para imágenes, de modo que facilita la carga de imágenes para los usuarios. Además, se puede extender gracias a plugins. Es un editor bastante popular que se encuentra en constante desarrollo.

SCEditor

SCEditor es un editor XHTML ligero y poderoso. Posee opciones avanzadas como creación de tablas y citas, inserción de correos, imágenes y también uso de emoticonos.

Content Tools

Content Tools es un editor WYSIWYG ligero y con un diseño limpio. Ha sido diseñado para que sea sencillo extenderlo, por eso posee 5 librerías que pueden ser usadas de manera independiente. Permite a los usuarios subir imágenes e incluso la función de Deshacer/Rehacer.

Content Tools no hace uso de JavaScript, pero se puede integrar con este lenguaje. En la página de descarga puedes encontrar una demostración bastante única: el editor te permite modificar los propios elementos que se encuentran en la página.

Trumbowyg

Trumbowyg es un editor de texto ligero. Se encuentra optimizado para HTML5 y es compatible con populares navegadores como Google Chrome y Firefox. Es totalmente personalizable y puedes extender sus funciones mediante plugins. Es un editor con un diseño bastante sencillo. Necesita de jQuery para funcionar correctamente.

Medium Editor

Medium Editor usa como inspiración la barra de herramientas del editor de Medium.com. El editor de texto posee las opciones básicas y tiene un estilo sencillo y moderno. Posee una forma minimizada que se mueve inmediatamente a la frase que hemos seleccionado, lo cual es bastante útil.

Medium Editor se ha realizado en su totalidad en JavaScript, sin necesidad de otra framework o herramienta adicional.

TinyMCE

TinyMCE es una plataforma basada en JavaScript y te permite convertir áreas de texto HTML u otros elementos HTML. Puedes subir archivos desde Google Drive, Dropbox y otros servicios de almacenamiento en la nube.

TinyMCE es un proyecto de código abierto, tiene soporte para varios lenguajes, puedes enlazar elementos multimedia e incluso viene con un corrector ortográfico.

Bootstrap 3 WYSIWYG

Bootstrap 3 WYSIWYG es un plugin para JavaScript que te permite crear un sencillo editor WYSIWYG. Posee plantillas para la barra de herramientas, así como temas que puedes modificar. Hace uso de Twitter Bootstrap y WYSIHTML5

Summernote

Summernote es otro editor WYSIWYG sencillo basado en Bootstrap. Posee varios temas que puedes aplicar a la interfaz. Se puede integrar rápidamente con otras herramientas como Django, Rails y Angular.

CKEditor

CKEditor es un completo editor que simplifica la creación de contenido web. Como muchos otros mencionados previamente, posee una barra de herramientas para modificar el texto y permite la adición y alineación de imágenes. Es compatible con Microsoft Word, de modo que los usuarios pueden copiar texto de este programa y pegarlo sin problemas en CKEditor.

jQuery Notebook

JQuery Notebook es un plugin que te permite crear un editor de texto para aplicaciones web. Posee un diseño sencillo y limpio con opciones básicas de edición. Además, posee una forma minimizada y el color predeterminado que se emplea en la barra de herramientas es negro, de modo que luce más elegante que otros editores.

Material Note

Material Note toma como base Summernote, pero le añade el popular Material Design. Como resultado, tenemos un editor de texto sencillo, limpio y moderno. Posee opciones esenciales de cualquier editor de texto, permite la adición de imágenes, enlaces y tablas.

Easy Editor

Otro editor de texto que posee un diseño limpio. Te permite añadir negritas, itálicas, alinear párrafos, añadir títulos y citas, además puedes insertar imágenes y videos de Youtube.

En conclusión…

Un editor WYSIWYG no es necesario en todo tipo de sitios web, pero en las páginas que sí lo requieren, es un recurso invaluable y de gran ayuda para los usuarios. Todos ellos poseen herramientas básicas para modificar el texto que el usuario redacta, pero algunos tienen características avanzadas como inserción de enlaces y videos, creación de tablas, etc. Dependiendo del tipo de editor que estés buscando podrás elegir entre uno u otro.

En esta lista hemos incluido todo tipo de herramientas, tanto gratuitas como de pago. La mayoría de herramientas de pago que hemos añadido a la lista poseen planes gratuitos con opciones básicas, así que te invitamos a probar cada editor y verificar cuál es el más adecuado para tu proyecto.