Mejor editor WYSIWYG para contenido web (HTML)

Actualización: junio de 2017

Hay diferentes fuera de la caja de WYSIWYG para la web. exponentes destacados de la web HTML WYSIWYG son los CKEditor o el TinyMCE. Pagados (y aún así extensibles) soluciones incluyen Froala y Redactor. ¿Cuál es correcto para usted?

TL; DR: Si eres comercial, utilice el Editor de Froala. Si no está o necesita una fuente abierta de usar editor TinyMCE.

He aquí un desglose más exhaustivo de todos los editores.

CKEditor

El CKEditor es el más ampliamente adoptado editor WYSIWYG hoy en día. Google confirma esta tendencia en comparación con su principal competidor TinyMCE. Sin embargo, estoy totalmente de no entiendo cómo llegó hasta allí. Rápidamente se ha instalado, lo daré mucho. Sin embargo, los desarrolladores parecen no tener la más mínima idea sobre el diseño o usabilidad. Así es como se ve así:

CK Editor Captura de pantalla

Se ve muy pesada y pasada de moda. Pero el problema realmente comienza cuando se mira en las características más complejas. Como la inserción de una mesa.

Editor CK Tabla Inserción

Creo que esta interfaz habla por sí mismo.

La próxima atrocidad siguiente una vez que tenga la entrada de la tabla inserta:

Tablas CKeditor

Sí, sé que esto es como navegadores muestran tablas históricamente, pero no podía el editor de un tanto aliviar el dolor? Cada otro editor que encontré no lo muestra como este.

De todas formas, vamos a pasar e insertar una imagen:

CKEditor inserción de imágenes

Una vez más, nos enfrentamos a un diálogo muy bien diseñado. No. Yo no quiero perder más espacio, así que no voy a publicar más cuadros de diálogo emergentes CKeditor. ¿Cuáles son las partes buenas sobre los CKEditors? Bueno, hay plugins, es personalizable y tiene una amplia adopción por lo que encontrarás un poco de ayuda para sus problemas en el interwebz.

Otra cosa que he notado, es que CK es la conversión de forma más agresiva la entrada de otros editores. Por ejemplo una garrapata ( ‘) se deja solo por la mayoría de los editores, mientras que CK convierte a & # 39 ;. Ya sea que encuentre esto bueno o malo depende de lo que desea. Por cierto, ¿sabía que el CKEditor solía ser el FCKEditor el nombre de su creador Frederico Caldeira Knabben, pero luego se dieron cuenta de fck está demasiado cerca de f * ck?

TinyMCE

Ah, lejos de los horrores que es el CKEditor y en adelante a aventuras con TinyMCE. El nombre significa que era “Tiny muchos siglos antes”. Que no es tan malo, las computadoras se vuelven más rápidos, pero algunas personas de la comunidad no les gusta.

Así que a primera vista parece TinyMCE más bonito que el CKEditor.

TinyMCE Captura de pantalla

Entiendo la mayor parte de los elementos, ya que sólo los más comunes son detallada y de los otros que utilizan el menú desplegable de texto y etiquetas. Si no ha dado esta demasiado pensamiento, he aquí por qué este es un buen paso . Vamos a continuar insertando una tabla:

TinyMCE Tabla Inserción

Lo que me gusta de ella, es la parrilla de selección del tamaño de la tabla. Lo que no me gusta de ella es, que se trata de mostrar la opción 1, que se puede hacer clic y 5 locales de los que no lo son.

botones inútiles TinyMCE

¿Por qué se muestra esto a mí? Bueno de todos modos, este es un detalle. A continuación, la tabla insertada se ve bien y me da opciones para editarlo:

edición de tablas TinyMCE

Así todo-en-toda la experiencia tabla TinyMCE es satisfactorio, pero no insoportable. Vamos a realizar una carga de imágenes a continuación. Oh, eso es correcto, no puedo. Sólo puedo vincular una URL en la que mi imagen es. Eso es realmente útil, por supuesto, ya que siempre subo mis imágenes primero en otro servidor, antes de usarlos en la plataforma real! ¡Estupendo!

la inserción de imágenes TinyMCE

Por supuesto, para cualquier carga de imágenes a un servidor, el editor no puede hacerlo por sí mismo, pero creo que por lo menos debería proporcionar la interfaz y explicar cómo se puede conectar a su servidor. Traté de Google para una solución, pero no encontraba nada rápido, que suele ser una mala señal. Por otro lado, estoy seguro de que hay cosas e incluso si no hay, añadiendo un botón “Add Media” a sí mismo no será demasiado duro. En realidad, WordPress lo hace así:

Wordpress Añadir botón de Medios

Utilizan el TinyMCE con un botón externo para cargar los medios de comunicación. Así que si TinyMCE es lo suficientemente bueno para WordPress, seguramente será lo suficientemente bueno para usted? Así, tenga en cuenta que WordPress ha existido desde hace bastante tiempo y por lo tanto tiene TinyMCE y que por lo tanto podría ser una opción legado. Además, WordPress tiene que usar el código de fuente abierta con el fin de ser capaz de distribuirlo. La siguiente opción será un pago, por lo que si la solución no tiene por qué ser de código abierto, es posible que considerarlo.

Froala

Ahh no es esto una felicidad? Empezar de muy bien. Hasta que se note que no es libre.

Bueno, ¿puedo personalizarlo? Sí tu puedes. Se puede escribir plugins https://www.froala.com/wysiwyg-editor/docs/concepts/create-plugin de este editor, así como para CK o TinyMCE. La única diferencia es que le hará entre $ 99 y $ 799 más pobre, mientras mira mejor. Vamos a ver si la función de mesa y las imágenes se implementan mejor que en CK o TinyMCE. Esa es realmente la nada difícil para un WYSIWYG de todos modos. Hacer algo audaz que incluso podría hacer yo mismo … Por lo tanto, las tablas:

Froala Tabla Inserción

Eso es todo lo que necesito para insertar! ¡Gracias! mesas de edición:

Screen Shot 05/12/2016 a las 01.42.58

Sólo puedo decir una cosa: muy sofisticado y pensado. Fronteras se pueden arrastrar y con estilos y las células individuales son aún más plausible.

Tablas Froala

¿Qué pasa con las imágenes?

Froala inserción de imágenes

Sí, esto es lo que necesito! La primera prioridad: Cargar. Si realmente quiere, entonces está bien, haga clic en ese enlace maldito para que pueda insertar una imagen mediante la URL. ¿Cómo se ve como una vez que se inserta?

Froala edición de imágenes Parte 1Froala edición de imágenes

Wow, puedo cambiar su tamaño y todo! Eso es simplemente genial.

Quiero concluir el resumen sobre Froala con una declaración de que no estoy afiliado con ellos o su producto. Simplemente la frustración por CK y Tiny me llevó a ser tan emocionado por algo que le costará 800 dólares para un uso comercial. Los siguientes son algunos de editor de más, sólo que no se describe en detalle como nunca más.

Update

Escribí esta opinión originalmente sobre Froala Editor v1. Ahora han lanzado un v2, y es aún mejor. Estamos utilizando el Editor de Froala en nuestro producto Taskbase incluyendo las personalizaciones. Su API es intuitiva y fue un placer trabajar con él. Con sólo 300 líneas de código logré correa juntos un plugin matemáticas, la brecha de texto plugin y una característica lista especial. Todas las opciones del editor están bien documentados y útil. Encontraron un buen equilibrio entre las características de gran alcance aún no sobrecargar el editor y está muy bien diseñado (código, así como el diseño). Al comprar el editor, se puede descargar el código fuente completo. Sin embargo, no le recomendaría a “piratear su núcleo” (google núcleo de la piratería si no ha oído hablar de esto), pero en lugar de escribir plugins. De esta manera usted puede estar seguro de permanecer compatible con sus actualizaciones.

Redactor

Al lado de Froala, hay otro editor WYSIWYG pagado. Se llama Redactor. Redactor tiene menos funciones que Froala. Sólo se permiten imágenes de ancho completo tablas de ancho completo . Además las tablas no se pueden apilar una en otra o personalizado. Estas restricciones podrían ser exactamente lo que algunas personas están buscando.

Redactor Screenshot

Sin embargo, creo que incluso si quieres un editor simplista Froala es la mejor opción. Usted puede fácilmente tomar una gran cantidad de funcionalidad de Froala (por ejemplo, no se muestra un botón de subida de archivos o un botón de cambio de color), pero una vez que decida posteriormente desea esas cosas de todos modos, podrás malditamente feliz el editor ya los tiene y usted no tiene que programar usted mismo!

QuillJS

Captura de pantalla del editor de QuillJS

QuillJS es aa buena opción si quieres un editor que funciona sin necesidad de JQuery, por ejemplo, si necesita utilizar el ShadowDOM. Es un proyecto de código abierto que puede encontrar en Github en  https://github.com/quilljs/quill con más de 13k estrellas.

En el lado negativo que no ofrece una funcionalidad extendida como por ejemplo tablas.

ContentToolsJS

Mientras ContentToolsJS también tiene un fuerte enfoque en la belleza, se lanza por la borda un buen montón de editor de la noción clásica. Su editor simplemente cuelga en el aire, lo cual me imagino que podría convertirse en un problema en los teléfonos móviles? También no pude encontrar nada sobre cusomizability, así que espero que no podía escribir cualquier plug-in para ello. Por último, pero no menos importante, vamos a inspeccionar la calidad de nuestros elemento preferido regalar, la tabla:

Captura de pantalla ContentToolsJS

No es personalizable en absoluto y siempre equidistantes (aquí ⅓, ⅓, ⅓). Así que si usted tiene una gran cantidad de texto en digamos columnas dos y tres y sólo etiquetas en la columna uno, entonces usted es “el antiguo nombre de CK-editor-ed”

SimpleMDE

Mientras que todos los otros editores discutido hasta ahora eran los editores de HTML, revisemos un editor de reducción del precio para un cambio. Es más fácil escribir un editor de rebajas porque es sólo un subconjunto de las características de HTML, pero por otro lado se va a tener que vivir con esas restricciones después. SimpleMDE ha hecho un buen trabajo con negrita, cursiva, encabezados y así sucesivamente. Como suele. Se deja a cabo mesas a pesar de que los recibiría el apoyo de Markdown. La culpa es tuya SimpleMDE! Sigue siendo el mejor de rebajas-Casi-Wysiwyg por ahí.

Captura de pantalla SimpleMDE

Otros editores

He intentado un montón de otros editores como Trubowyg, textAngular o Summernote. Sólo voy a decir que en realidad no me convencen y dejarlo en eso. Elija Froala y salir a jugar en lugar de leer sobre más editores!

Sólo por diversión: Si quieres ver cómo lo hace Wikipedia, se puede! Simplemente haga clic en “editar” en Wikipedia. Para las páginas alemanas, tienen un editor de catering bastante elaborado a casi cualquier necesidad:

Wikipedia Editor Captura de pantalla

Conclusión

Yo no habría pensado que es tan condenadamente difícil encontrar un WYSIWYG decente en 2016. Pero al parecer es. Si necesita una solución de código abierto y no sobran unos cuantos dólares, TinyMCE es la mejor opción. Si no te importa gastar un poco de dinero o sería más caro para que programe su encargo botón “Añadir Medios”, elija Froala. Si no quiere tomar mi palabra para ella, aquí es otra crítica .

Leave a Reply

Your email address will not be published.