Los 7 mejores editores HTML WYSIWYG de código abierto

Hay dos tipos de editores de código: editor simple basado en texto y WYSIWYG (lo que ves es lo que obtienes). En nuestro artículo anterior, discutimos algunos de los mejores  en los que escribe el código manualmente. Si bien no hay problemas con los editores de HTML basados ​​en texto, no obstante, son de la vieja escuela. Y ahí es donde entra en juego el editor HTML WYSIWYG de código abierto. Los editores HTML WYSIWYG brindan opciones visuales para crear un sitio web sin ningún conocimiento de programación (recuerde el   anuncio

El editor HTML WYSIWYG tiene varias ventajas sobre los editores basados ​​en texto. Para empezar, puede crear un sitio web con editores WYSIWYG incluso si no sabe codificar. Todo lo que tiene que hacer es arrastrar y soltar elementos en el editor y, una vez que haya terminado, simplemente copie el código. Sin embargo, encontrar un buen editor HTML WYSIWYG de código abierto puede ser una tarea ardua. Aquí es donde entramos.

El mejor editor HTML WYSIWYG de código abierto

1. Pelar

Pell es probablemente el editor WYSIWYG más pequeño y simple con el que te encontrarás. ¡Literalmente tiene un tamaño de 1,38 kb!

Ofrece todas las funcionalidades y formatos básicos como encabezados, negrita, cursiva, listas, citas, enlaces e imágenes. Otras acciones disponibles incluyen sangría, superíndices, subíndices y nombre y tamaño de fuente. Una vez que haya terminado de escribir y formatear con Pell, generará el código HTML completo que luego puede simplemente copiar y pegar en su sitio web o página y estará listo para comenzar.

Ventajas:

  • WYSIWYG más pequeño y ligero
  • Sin dependencias
  • Fácilmente personalizable

Contras:

  • Sin edición de HTML sofisticada
  • Imágenes solo a través de enlaces

Veredicto:
Teniendo en cuenta su tamaño, Pell es un paquete convincente. Pero seamos honestos, solo puede obtener archivos HTML básicos con las opciones de edición limitadas. Entonces, si usted es alguien que busca un editor WYSIWYG rápido y liviano que sea de código abierto para un trabajo muy básico, definitivamente eche un vistazo a Pell.

2. AbrirWYSIWYG

OpenWYSIWYG es un editor HTML de texto enriquecido para varios navegadores codificado completamente en JavaScript. Simplemente copiando y pegando unas pocas líneas de código, puedes convertir cualquier <textarea> en el robusto editor HTML WYSIWYG de OpenWYSIWYG.

La interfaz de usuario y las opciones de edición con los menús desplegables son muy similares a las de cualquier editor de texto y te sentirás como en casa. Además de todas las opciones básicas de formato, OpenWYSIWYG cuenta con un selector de color mejorado con 216 colores web para elegir y una poderosa herramienta de formato de tabla con todas las opciones que se te ocurran.

Otra gran ventaja de OpenWYSIWYG es que, junto con todas las opciones visuales, aún puede  ver el código HTML sin formato y realizar ajustes directamente en el código. Útil para cuando desea aprender o actualizar sus habilidades de codificación.

Ventajas:

  • Potente entorno de edición
  • Interfaz de usuario intuitiva y fácil
  • Selector de color y amplias opciones de edición de tablas.

Contras:

  • No actualizado en algunos años.

Veredicto:
al estar escrito en JavaScript, el editor OpenWYSIWYG HTML de código abierto debería funcionar con cualquier otro lenguaje de programación web. Si está buscando algo un poco más poderoso que Pell para incorporar en su aplicación web, esta es una gran opción.

3. TinyMCE (Edición comunitaria)

El siguiente editor HTML WYSIWYG de código abierto en nuestra lista es TinyMCE. También está completamente escrito en JavaScript y ofrece una interfaz de usuario y una experiencia como la mayoría de los procesadores de texto. Eso lo hace más fácil de usar.

TinyMCE , pero la Community Edition es gratuita y de código abierto. Viene con todas las opciones básicas de edición como formato de texto, listas, tablas y también algunas opciones de edición de imágenes.

Los desarrolladores han mantenido el precio de los modelos premium según el número de usuarios. Algunas de las características premium incluyen soporte para Google Drive y Microsoft Azure, extensiones, corrector ortográfico y de enlaces, y soporte técnico.

Ventajas:

  • Soporte de extensión
  • Gestión de archivos
  • Apoyo técnico
  • Editor de código estilo IDE para HTML

Contras:

  • Caro
  • No completamente de código abierto

Veredicto:
TinyMCE con su opción de fácil integración, interfaz de usuario fácil de usar y gran cantidad de funciones, es un paquete completo. Si solo desea el editor HTML WYSIWYG de código abierto más rico en funciones y está de acuerdo con gastar algo de dinero, TinyMCE es el camino a seguir. Además, ofrecen una prueba gratuita de un mes para su modelo Pro que siempre puede consultar.

4. Jodit

Jodit es otro editor de código abierto WYSIWYG HTML rápido y liviano que puede incrustar en su código y comenzar a editar su página. Es bastante ligero con un tamaño de alrededor de 100 KB y ha sido escrito completamente en TypeScript. Es por eso que no necesita dependencias o bibliotecas para ejecutarlo.

Viene con una interfaz de arrastrar y soltar para la imagen también. También puede adjuntar videos de YouTube o Vimeo a través de un enlace o incrustarlos. Lo mejor que me gusta de Jodit es que viene con un editor ACE listo para usar y con un solo botón, puede cambiar entre el código real y el modo de vista previa.

Ventajas:

  • Ligero, sin bibliotecas
  • Arrastrar y soltar
  • Editor ACE listo para usar
  • Soporte técnico (Pagado)

Veredicto:
Jodit ofrece lo mejor de ambos mundos: editor WYSIWYG visual fácil y edición de código sin procesar. Si eres alguien que tiene al menos algún conocimiento en HTML, Jodit podría ser la mejor opción para ti.

5. Nota de verano

Summernote es un editor WYSIWYG súper simple de código abierto construido en jQuery y basado en Bootstrap. Dado que es compatible con Bootstrap, puede usar todos los estilos y temas admitidos en su editor desde Bootswatch.

El código abierto del editor HTML WYSIWYG en sí mismo tiene una interfaz de usuario muy limpia y mínima e incluso puede editar o agregar opciones de formato según sus necesidades. Con el modo Air de Summernote, puede ocultar toda la barra de herramientas y editar su documento sobre la marcha. Conveniente. También puede convertir automáticamente todas las imágenes a base64, por lo que no tiene que manipular imágenes en absoluto.

Para mí, la mejor parte de Summernote es el equipo trabajador de desarrolladores detrás de él que siempre está escuchando a la comunidad y agregando nuevas funciones. Los ejemplos incluyen soporte para complementos y una versión lite o vanilla de Summernote que no requiere Bootstrap.

Ventajas:

  • Curva mínima de aprendizaje
  • Modo aéreo para editar sobre la marcha
  • Soporta Bootstrap 3.xx a 4.xx
  • Ver y editar en HTML

Contras:

  • Requiere Bootstrap

Veredicto:
Summernote es probablemente el editor HTML WYSIWYG de código abierto más rico en funciones pero gratuito disponible en el mercado y mejora constantemente. Si está trabajando con Bootstrap, entonces Summernote es obvio, pero incluso si no lo está, Summernote merece ser revisado.

6. Froala

Froala es un hermoso editor HTML WYSIWYG de código abierto escrito en JavaScript. Es una de las herramientas más populares de esta lista y su popularidad entre los desarrolladores se puede atribuir a su fácil integración y diseño limpio.

Froala es un editor muy poderoso en sí mismo y la gran cantidad de complementos solo ha aumentado lo mismo. Algunos de ellos incluyen un editor de imágenes avanzado, emoticonos, corrector ortográfico y es fácil incluso crear su propio complemento. También se puede acceder a todas las herramientas con el editor en línea, que es extremadamente conveniente.

Al igual que TinyMCE,  , pero incluso la versión gratuita tiene mucho impacto. La única diferencia es que no obtendrá el código fuente completo ni el soporte técnico.

Ventajas:

  • Editor ligero y potente
  • Edición en línea
  • Gran cantidad de complementos

Contras:

  • No es ideal para aplicaciones/sitios web móviles híbridos

Veredicto:
Froala es rápido y liviano con una hermosa interfaz de usuario, pero aun así se las arregla para brindar todas las funciones que uno podría estar buscando en un editor HTML WYSIWYG. Si está bien sin el código fuente y el soporte, la versión gratuita le servirá bien, de lo contrario, sabrá qué hacer.

7. Editor de CK

CKEditor es extremadamente popular entre los usuarios por ser un editor HTML WYSIWYG de código abierto bellamente diseñado. Viene con más de 21k pruebas para ayudarlo a aprender HTML en un diseño amigable. La documentación detallada está allí para ayudarlo a perfeccionar aún más sus habilidades. Algunos de los nombres más importantes de la industria tecnológica confían en él.

Tenga en cuenta que deberá mantener intactos los avisos de derechos de autor en cada archivo y no eliminar el archivo LICENSE.md ubicado en la carpeta de instalación de CKEditor. Eso no es un inconveniente, especialmente cuando obtienes tanto valor a cambio.

Hay soporte para complementos, @menciones, emojis, navegadores heredados e incluso autocompletar, lo que puede ahorrar mucho tiempo.

Ventajas:

  • Documentación detallada, pruebas, preguntas.
  • Colaborar y @mencionar
  • Autocompletar

Contras:

  • Mantener archivo de licencia

Menciones honoríficas:

1.   es un clon de código abierto del editor WYSIWYG en línea para Medium.com. Es muy simple, ligero y viene sin dependencias. Aunque no es tan poderoso, podría funcionar como una excelente herramienta de edición en línea para documentos de texto o relacionados con texto.

de Atom   le permite agregar un panel de vista previa en el que puede tener una vista previa en vivo de su código HTML, lo que puede ser muy útil para los desarrolladores. Si bien esto definitivamente no es para principiantes, es un gran paquete para agregar a su flujo de trabajo existente si ya programa en HTML.

El mejor editor HTML WYSIWYG de código abierto

Si bien HTML sigue siendo la forma más poderosa de crear un sitio web y es posible hacer cosas mucho más complejas con él, los editores WYSIWYG se han asegurado un lugar propio. Aprender a codificar requiere una gran inversión de tiempo y energía y puede que no tenga sentido para todos. Si tiene experiencia previa en programación y no tiene tiempo para aprender, puede salirse con la suya utilizando un editor HTML WYSIWYG de código abierto.