javascript - span - El estado de contenteditable

span contenteditable (6)

El estado de contenteditable

El marcado producido por los editores de wysiwyg es atroz. Está lleno de atributos de estilo y, a menudo, ni siquiera es válido HTML (faltan etiquetas de cierre, estilos superpuestos, etc.). ¿Existen soluciones establecidas para los problemas introducidos por contenteditable ? Si no, ¿cómo puedo crear uno?

HTML inválido

Por ejemplo, después de ingresar una lista desordenada seguida de una línea de texto en un popular editor de texto enriquecido, se me presenta el siguiente HTML:

<ul><li>foo</li><li>bar</li></ul><div>baz

¿De dónde viene la etiqueta div ? ¿Por qué no se cierra? ¿Por qué no un párrafo - correctamente cerrado, por supuesto? ¿Es esto prevenible?

HTML no semántico

Otro editor produjo lo siguiente:

● Lorem● ipsum

Este es un marcado válido, ¡pero es semánticamente horrible! En lugar de una lista desordenada con estilo, el editor ha insertado caracteres con viñetas literales . Como desarrollador, no tengo ni idea de qué hacer con el marcado que ha generado contenteditable . En lo que respecta al estilismo, es completamente inútil.

Sustituciones

Hasta hace poco, he estado usando Markdown como una herramienta para generar HTML semánticamente correcto de los usuarios. Sin embargo, Markdown carece de ciertas características que mis usuarios solicitan (facilidad de uso para no técnicos, posicionamiento de imágenes, etc.). Después de buscar un editor de wysiwyg que produzca un marcado semántico válido durante varias semanas, he descubierto que contenteditable hace que esto sea imposible. ¿Alguien en algún lugar está hablando de soluciones a estos problemas? ¿Cómo puedo involucrarme?

[Actualización] Aclaración

Supongo que no estaba completamente claro al frente. No estoy pidiendo formas de solucionar los problemas de contenteditable . He encontrado muchos de ellos, incluyendo la mayoría de los que se mencionan a continuación. Lo que estoy tratando de encontrar es la causa raíz de estos problemas. ¿Por qué está contenteditable tan roto? ¿Se debe a problemas técnicos o problemas de código heredado? Además, ¿qué se está haciendo para solucionarlo y dónde se está realizando este trabajo?

[Actualización] Google Docs

El HTML en el segundo ejemplo anterior proviene del Editor de Google Docs. Sin embargo, como señala AlfonsoML a continuación, Google Docs no usa contenteditable en su editor. Su técnica se explica here .

Creo que su problema es tratar de usar una herramienta como Google Docs como se indicó en un comentario anterior en lugar de una herramienta que está realmente enfocada en la edición de HTML.

Sí, ambos tipos son WYSIWYG, pero no creo que el objetivo de GDocs sea producir un buen HTML, sino que están enfocados en proporcionar una alternativa a MS Word, incluso si tienen que ir y crear un HTML extraño en el camino.

Realmente no puedo creer que haya estado investigando esto durante varias semanas y que aún no esté utilizando CKEditor o TinyMCE. Ambas soluciones incluyen las opciones para usar atributos, clases o estilos para la salida, es solo una cuestión de mirar las muestras, leer un poco los documentos y ajustarlos a sus necesidades.

Esta es una pregunta difícil que cada uno resuelve de manera diferente.

Conozco las siguientes posibilidades:
* Solo déjalo ir (el peor)
* Intenta arreglar el HTML por ti mismo (TinyMCE y CKEditor intentan hacerlo con varios porcentajes de éxito)
* Usa un plugin como XStandard
* Use DOM Tom para crear su propio editor: cree un caret de un DIV, maneje la selección, la edición y simplemente todo por su cuenta. Así es como lo hace Google por ejemplo. Sin embargo, esto necesita mucha codificación.

He respondido una pregunta muy similar en Editores de texto editables de contenido : por qué la situación se ve así y qué podemos hacer nosotros, los autores de los editores WYSIWYG, al respecto.

Sí, sé que esta pregunta tiene 2 años, pero aún está actualizada.

Para los navegadores que admiten contenteditable , una solución se puede agregar fácilmente; utilizando, por ejemplo, jQuery para guardar los datos y adjuntar nuevos elementos al contenido editable (con botones, obviamente), se obtiene un sencillo editor WYSIWYG con muy poco esfuerzo.

Un problema que podría ser un poco más difícil de resolver es garantizar que la ubicación de estos nuevos elementos sea correcta. Sin embargo, esto se ha resuelto para Webkit , y estoy seguro de que también es posible hacerlo en otros navegadores.

Un editor que use contenteditable sería de fácil implementación y ligero, definitivamente es algo que vale la pena desarrollar, IMHO.

Edición: después de volver a leer su pregunta, me doy cuenta de que en realidad estaba buscando una solución de trabajo que no se pueda contenteditable . No estoy seguro de por qué; AFAIK contenteditable produce un marcado válido, y si toma el control total (solo permite a los usuarios insertar elementos y cambiar sus propiedades a través de su interfaz de usuario), también será semántico. AFAIK, ningún editor WYSIWYG actual utiliza contenteditable , pero podría estar equivocado.

Sospecho que está en el estado por varias razones específicas:

1.) El estándar HTML5 que lo define no define lo que debería generar, por lo que cada implementación debe decidir por sí misma.

2.) El editor no sabe si desea una representación precisa o semántica. Estos son a menudo compensaciones

3.) Parece que Mozilla arrastró su antiguo código de Netscape Mail / Composer a su implementación designMode y luego lo arrastró a contentEditable. Sigue utilizando los mismos contornos punteados y los pequeños controles rojos que existían hace 10 años y sospecho que hay una gran cantidad de código heredado.

4.) Parece que Internet Explorer hizo lo mismo, e IE nunca hizo nada correctamente en primer lugar. Todavía está arrastrando su legado en forma de peculiaridades y modos de "compatibilidad".

5.) Realmente solo se usa en los sistemas de CMS y en los cuadros de foro / comentarios, y por lo general estos tienen envoltorios bastante pesados alrededor de la implementación. No he visto mucho uso en ningún otro lugar, especialmente en los que no tienen nada que ver.

6.) Hay pocos procesadores de texto en línea exitosos y menos WYSIWYG o aplicaciones de diseño de página. La presión para crear editores precisos simplemente no existe. Peor aún, Microsoft vende software fuera de línea como Word y Expressions que definitivamente se verían perjudicados por el crecimiento de los editores en línea, especialmente los gratuitos de alta calidad.

7.) Microsoft tiene un legado de creación de herramientas que generan un código HTML no válido e inflado que todavía existe en Outlook 2010 y el paquete Office.

8.) A veces, el mismo comando de selección y edición podría ser aplicable a varios objetos posibles que ocupan el mismo espacio y el editor nunca puede saber cuál es el que querías modificar. Además, un comando de edición podría hacer que un elemento se divida de forma indefinida o inesperada (de nuevo, no sabrá cuál preferiría).

No creo que contentEditable sea tan bueno como cortar tu propio HTML o usar una herramienta dedicada. Simplemente me concentraría en ejecutar algunas herramientas básicas de reparación / crucero (como HTMLTidy) sobre el resultado y lo llamaría un día.

Medium.js !!

Medium.js mantiene el código HTML dentro de semántico, sencillo y limpio. Medium.js también admite marcadores de posición, creación automática de recursos humanos (o BR, o P), eventos, teclas de acceso rápido, inyección de elementos simples y complejos, ¡y más!