¿Qué es un editor WYSIWYG?
El acrónimo “WYSIWYG” significa (Lo que ves es lo que obtienes) y se utiliza a menudo para describir las funciones, herramientas y bibliotecas de un editor de texto y documentos. Como ejemplo, Microsoft Word y Google Document son los ejemplos correctos para los editores WYSIWYG.
Los editores WYSIWYG se utilizan comúnmente en blogs y publicaciones web, edición de correo electrónico, creación de listas de correo electrónico y redacción de libros.
Seguro que conoces muchos creador de anuncios de vídeoeditores de fotografías y muchos otros editores que te ayudarán a completar tus tareas y alcanzar tus objetivos.
En este artículo, enumeraremos las mejores bibliotecas de JavaScript WYSIWYG de código abierto que los desarrolladores pueden usar para agregar funcionalidades ricas de edición de documentos en sus proyectos.
1- Froala
Froala es un editor de JavaScript WYSIWYG gratuito y de código abierto que viene con un rico conjunto de funciones. Está escrito en JavaScript puro y viene con una API fácil de usar para desarrolladores, ya que es fácil de ampliar con complementos.
Froala también ofrece un modo de edición en línea similar al editor de blogs Medium y Ghost.
Con Froala puede cambiar fácilmente al modo de pantalla completa, imprimir el contenido directamente, ver los códigos HTML de su contenido y descargarlo en formato PDF.
2- Editor.js
Editor.js es un editor WYSIWYG en línea que genera datos JSON estructurados limpios. Es una opción ideal para los desarrolladores que desean mantener su contenido listo para AMP de Google, contenido móvil, artículos instantáneos, aplicaciones de texto a voz y lectores de voz.
Editor.js ofrece una docena de complementos útiles, que incluyen complementos multimedia, extensiones de editores de código, listas personalizadas y complementos multimedia integrados. Los desarrolladores también pueden ampliarlo con sus propios complementos personalizados.
3- Abrir WYSIWYG
Abra el editor WYSIWYG o OpenWebWare editor es un editor enriquecido de reemplazo de área de texto que se parece al editor WYSIWYG de Microsoft Word. Funciona sin problemas con todos los navegadores web conocidos y está escrito en JavaScript puro.
El editor viene con un conjunto de creación y edición de tablas visuales, selector de color, interfaz personalizada y modo de edición HTML.
El proyecto es verdaderamente de código abierto y se publica bajo licencia LGPL.
4- nota de verano
Summernote es uno de mis editores WYSIWYG favoritos en esta lista, ya que lo usé en varias ocasiones con proyectos My Meteor. Es fácil de integrar con cualquier aplicación JavaScript, personalizable, funciona perfectamente con la biblioteca CSS Bootstrap y es compatible con todos los navegadores populares: Google Chrome, Mozilla Firefox, Opera, Edge e Internet Explorer 9+.
Debajo del capó, Summernote utiliza la biblioteca CSS Bootstrap y el marco jQuery JavaScript.
Summernote es un código abierto publicado bajo la licencia MIT.
5- Diminuto
TinyMCE puede ser la primera y más popular biblioteca de JavaScript WYSIWYG para desarrolladores. Se utiliza en miles de proyectos basados en web.
Tiny es compatible con pantallas de escritorio y móviles, ya que viene con un sofisticado conjunto de herramientas de diseño de tablas, un corrector ortográfico integrado, compatibilidad con iFrame, selector de color, emojis, creador de tablas de contenido, inserción de fecha/hora y generador/administrador de plantillas.
6- Pluma
Quill es otro editor WYSIWYG de código abierto y ordenado para proyectos web. Esto también lo usé para algunos de mis proyectos Meteor. Lo utilizan empresas como SalesForce, Reedsy, Lever y varias otras.
Quill admite la incrustación de medios de forma inmediata y ofrece numerosos módulos fáciles de usar para desarrolladores, extensiones que son fáciles de personalizar y ampliar.
7- editor de aloha
editor de aloha, es un editor HTML WYSIWYG que admite la incrustación de medios enriquecidos como videos, audios, gráficos y animaciones. Aloha se lanza bajo su propia licencia.
Aloha se creó originalmente para el proyecto Gentics CMS y luego lanzó su código fuente junto con numerosos componentes del proyecto.
8- editor medio
Medium editor ofrece un editor en línea WYSIWYG simple, que funciona directamente en su contenido HTML. Está probado en muchos navegadores como Mozilla Firefox, Internet Explorer IE 9+, Edge, Safari y Google Chrome.
9- pell
Pell es un editor de texto WYSIWYG ligero de código abierto para web sin dependencias JS externas o masivas. El tamaño comprimido/minimizado de la biblioteca es 1,34 Kb, que es extremadamente pequeño en comparación con otras bibliotecas de esta lista.
10- Medio.js
Medium.js es un editor de contenido WYSIWYG inspirado en Medium que edita contenteditable Contenido HTML. Viene con soporte integrado para teclas de acceso rápido personalizables y es compatible con HTML5, lo que significa que funciona sin problemas en Safari, Google Chrome, Opera, IE8+ y Edge.
11- CKEditor
CKEditor 5 es un editor de texto enriquecido JavaScript ultramoderno con arquitectura MVC, modelo de datos personalizado y DOM virtual. Está escrito desde cero en ES6 y tiene un excelente soporte para paquetes web. Proporciona todo tipo de solución de edición WYSIWYG imaginable con un amplio soporte de colaboración.
Si desea un editor WYSIWYG similar al editor de Google Doc, Microsoft Word y LibreOffice, entonces Ckeditor es la opción correcta.
12- ContenidoHerramientas
ContenidoHerramientas es un editor HTML5 ligero y elegante escrito en JavaScript y CoffeeScript; además, se lanza como un proyecto de código abierto bajo la licencia MIT.
ContentTools es una biblioteca fácil de integrar y ofrece carga de imágenes y soporte multilingüe, ya que permite a los desarrolladores agregar fácilmente sus propias herramientas personalizadas.
Los usuarios de Django pueden integrar ContentTools con el administrador de Django con la ayuda de la extensión Alberto Centelles y Guillaume Piot.
13- Jodit
Jodit es un editor WYSIWYG escrito completamente en TypeScript. Ofrece una versión ligera que es un proyecto de código abierto con licencia MIT y una versión Pro con más funciones personalizadas.
Jodit funciona a la perfección con Google Chrome, Internet Explorer 11, Firefox, Safari y Microsoft Edge.
14- SunEditor
El SunEiditor es un editor HTML WYSIWYG basado en JavaScript puro, sin dependencias externas. Incluye inserción de medios, carga de imágenes, integración de CodeMirror, edición de tablas y más.
SunEditor viene con un editor de imágenes avanzado incorporado que admite varias opciones de edición de imágenes. Tiene una rica documentación que ayuda a los desarrolladores a integrarla fácilmente en sus proyectos, ampliarla y más.
Cuando utiliza SunEditor en su proyecto, puede estar seguro de que puede pegar contenido de Microsoft Word y Excel.
15-Borrador.js
Draft.js es una rica biblioteca de edición de texto para proyectos de React. Es una biblioteca altamente extensible y personalizable, admite la incrustación de medios y utiliza immutable.js que utiliza el estado de la memoria persistente.
dieciséis-ProsaEspejo
ProseMirror es un editor WYSIWYG de texto enriquecido y ordenado que admite Markdown, XML y HTML. Es un marco modular que los desarrolladores pueden ampliar con sus extensiones y módulos personalizados.
ProsaEspejo También viene con un editor de código incorporado, un administrador de notas al pie, un linter, un administrador de historial que rastrea todos los cambios y un menú personalizado.
El proyecto es de código abierto y se publica bajo la licencia MIT.
17- trix
Trix es un editor WYSIWYG gratuito para contenido HTML. Puede funcionar directamente para <textarea></textarea> o <trix-editor></trix-editor> etiquetas. Para preparar Trix para su proyecto, todo lo que necesita es incluir los archivos CSS y JavaScript en el encabezado del proyecto HTML principal.
Trix es un código abierto desarrollado originalmente por Basecamp, los creadores de Ruby on Rails.
18- SCEditor
SCEditor es un editor HTML y BBCode WYSIWYG de la vieja escuela con una interfaz retro. Funciona directamente en el campo Textarea y viene con docenas de temas y opciones personalizadas.
Es una solución ideal para webmasters que todavía utilizan foros BB de estilo antiguo y desean cambiar a un editor WYSIWYG diferente.
SCEditor ofrece varios complementos para el foro MyBB, PHPBB, PunBB, foro Question2Answer (pago), foro SMF (complemento pago).
19- Interfaz de usuario tostada
ToastUI es una biblioteca completa de código abierto y un conjunto de herramientas que elevan el nivel de su web con características sofisticadas y funcionales. Una de sus bibliotecas es el editor WYSIWYG.
El editor de texto Toast UI WYSIWYG presenta un panel y editor rico en herramientas, administrador de tablas, creador de listas de verificación, editor de código incorporado, compatibilidad con Markdown, resaltado de sintaxis, visor de panel dividido y un editor de imágenes integrado.
El editor Toast UI WYSIWYG también viene con características únicas como vista previa en vivo, diseño de gráficos y opción de sincronización de desplazamiento, que es útil para la edición colaborativa.
20- Editor de lápiz
Pen es un editor WYSIWYG Markdown gratuito de código abierto que viene con un modo de edición en línea. Cuenta con un modo de depuración y es fácil de configurar mediante una configuración simple basada en objetos de JavaScript.
21- WangEditor
WangEditor es un editor de texto enriquecido de código abierto que admite proyectos de JavaScript puro, Vue y React.
WangEditor es fácil de integrar, configurar y funciona a la perfección con todos los navegadores. Admite medios integrados de YouTube, archivos adjuntos de imágenes, emojis, edición de tablas con opciones avanzadas y un editor de código integrado con resaltado de sintaxis.
Desafortunadamente, todavía no es compatible con navegadores móviles o pantallas pequeñas, y no es compatible con navegadores IE.
22- Editor épico
EpicEditor es un editor de JavaScript Markdown integrable con edición dividida en pantalla completa, vista previa en vivo, guardado automático de borradores, soporte sin conexión y más. Para los desarrolladores, ofrece una API sólida, se puede personalizar fácilmente y les permite intercambiar el analizador Markdown incluido con cualquier cosa que le arroje.
EpicEditor es un proyecto gratuito y de código abierto que se publica bajo la licencia MIT. Sin embargo, debería considerar el uso de otra biblioteca, ya que no recibió ninguna actualización durante años y ya no se mantiene.
Nota final
Editores WYSIWYG son esenciales para crear aplicaciones web con funciones de edición de texto enriquecido, como edición colaborativa, foros, wikis, CMS y sistemas de soporte.
Aquí, enumeramos los mejores editores WYSIWYG gratuitos de código abierto para texto, HTML y Markdown para que los desarrolladores elijan. Si conoce alguna otra biblioteca similar que no hayamos incluido aquí, háganoslo saber.
Etiquetas
desarrollo Herramientas para desarrolladores Código abierto Desarrollo web basado en web Frameworks Biblioteca React Vue UI UX Lista de programación JavaScript AGPL GPL Licencia Apache MIT Libre Software gratuito wysiwyg Productividad CMS github
