¿Qué elementos se pueden hacer de manera segura y satisfactoria?

Recientemente he estado trabajando con contenteditable en una página HTML5 y encuentro errores cuando lo uso con ciertos elementos, y me gustaría saber dónde y cómo puedo usarlo de manera segura.

Descubrí que hacer un elemento de trazo satisfactorio da como resultado un comportamiento defectuoso tanto en Firefox 1 como en Chrome 2 . Sin embargo, hacer que una div o sección contenteditable parezca completamente segura 3 .

Una directriz que un par de personas han mencionado es que solo los elementos a nivel de bloque deben ser contentos. Sin embargo, Mozilla Developer Network enumera los elementos de encabezado h1 a h6 como elementos de nivel de bloque , y hacer que un elemento de encabezado contenteditable tenga errores en Firefox 4 y puede bloquear la página en Chrome 5 .

Me gustaría poder utilizar más que solo divs y secciones, pero no tengo claro qué elementos puedo hacer de manera segura y satisfactoria. De forma segura , me refiero a que, al usar el elemento en condiciones normales, debería poder realizar tareas de edición normales sin que haga cosas inesperadas o con errores. Debería poder escribir en él, eliminar contenido, cortar, copiar, pegar y mover mi cursor de texto y resaltar texto sin comportamientos inesperados o extraños.

Entonces, ¿qué elementos puedo realmente contentar con seguridad? ¿Hay una categoría específica? ¿Hay ciertos criterios que el elemento contentivo seguro debe coincidir?

Notas de error:
1. Firefox 21 w / span: el elemento pierde el foco si el cursor de texto se lleva al principio o al final del elemento, pero no si se borró al eliminar el contenido. Resaltando una parte del elemento, cortar y luego pegar dividirá el elemento en dos en ese punto, luego inserte un elemento en blanco entre las dos partes, sin colocar realmente el texto que estaba tratando de pegar en ninguna parte.
2. Chrome 27 w / span: si el span abarca varias líneas, por ejemplo, al ser wordwrapped, cortar y pegar contenido a menudo insertará un linebreak después del contenido pegado.
3. A menos que visualice div: en línea, en cuyo caso puede perder el foco como en 1, pero aparentemente solo si lleva el cursor del texto hasta el final. Sin embargo, no considero este uso “normal” del elemento.
4. Firefox 21 con encabezado: al seleccionar parte del contenido, luego cortar y pegar, de forma similar a 1, dividir el elemento de encabezado por la mitad en ese punto e insertar un tercer elemento de encabezado entre las dos mitades. Al menos, tendrá su contenido pegado dentro, pero ahora tiene tres elementos de encabezado donde originalmente había uno.
5. Chrome 27 con encabezado: selecciona un contenido y corta y pega. La página se cuelga. ¡Obtienes un “Aw snap!” mensaje. Eso es.

Un jsFiddle según lo solicitado.

Aquí hay un enlace a un jsFiddle para reproducir lo anterior. Es bastante simple, aunque en este momento lo único que no se está reproduciendo es el error de perder el foco. Es bastante simple:

Heading

Some adjacent content Span! This is long enough it will spread over multiple lines.

An inline div also with multiple lines.

En mi opinión, diría que div es la apuesta más segura en todos los ámbitos. Cualquier elemento que desee editar realmente (ya sea un tramo, un encabezado, etc.), puede colocarlo dentro del div y editarlo como si fuera solo ese elemento. Además, para dar cuenta de la pantalla: problema en línea que mencionaste, siempre puedes usar float: left o float: right en tu div editable para darle una “sensación en línea” sin que realmente esté en línea.

¡Espero que ayude!

Dado que se trata de una función en evolución con una aparente baja prioridad de los proveedores de navegadores, el soporte ha sido incompleto y las regresiones no son raras. El estado actual de las cosas está evolucionando, así que revise los Googles, CanIUse, etc. y asegúrese de que haya soporte para los visitantes de su sitio, todo lo demás es discutible …

El soporte en Firefox parece ser sólido, al menos para algunos elementos, ahora https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content Funciona bien en Chrome y en cuanto a mis pruebas va. Y CanIUse se ve bien: http://caniuse.com/#feat=contenteditable

Sin embargo, hay varios errores diferentes relacionados con la función en los diferentes navegadores, pero para casos de uso simples debería estar bien ahora, a partir de agosto de 2016.