¿Cómo convertir contentEditable en un editor de marcado estructurado?

Question

Hay LyX y editores tales que intentan asegurarse de escribir texto que tiene una estructura distinta. Quiero el mismo comportamiento de un campo html5 contentEditable excepto que no sé cómo.

Mis requisitos:

• -tags Sin DIV se crean.
• El texto no está permitido fuera de un contenedor de texto. (párrafos, títulos, prebloques y elementos en línea)

También necesito descubrir cómo atravesar el contenido y enviarlo al servidor en esa forma restringida.

(también te encantará una buena documentación sobre las cosas que puedo hacer por un -field contenteditable)

Answer 1

Aquí es la especificación DOM por lo que significa para un elemento a ser editable: http://www.w3.org/TR/html5/editing.html#editable

Se suena como simplemente hacer que todas las etiquetas de párrafos y encabezados contenteditable le den lo que quiera, si entiendo lo que está preguntando. Si desea que el usuario pueda insertar nuevos párrafos y encabezados, la tecla Intro durante la edición insertará saltos de línea como etiquetas <br> en Chrome, pero si el usuario escribe en etiquetas HTML, se escapará y solo se mostrará como texto. En cuanto a la inserción de otro contenido formateado, eso depende completamente del agente de usuario; mis pruebas en Chrome muestran que aparentemente no permite al usuario insertar negrita/cursiva/etc. texto.

EDIT: aparentemente en Chrome (y presumiblemente también por extensión, Safari), al presionar Control-I, Control-B, Control-U se produce el mismo comportamiento que podría esperar de un editor de texto enriquecido.

También he probado en Firefox y encontró que, a diferencia de Chrome y no del todo contrario a la especificación, lo hace, de hecho, el montaje del nuevo <p> etiquetas en lugar de <br> 's, con un atributo añadido el _moz_dirty="". No deberías necesitar eliminar esto; si Firefox sigue las especificaciones, nunca romperá el DOM al insertar texto fuera de una etiqueta de esa manera. Pero, tenga en cuenta que los usuarios que usen Chrome y Firefox producirán diferentes estructuras HTML, lo que es posible que desee suavizar con Javascript o desinfección del lado del servidor ... Tampoco tengo IE disponible en esta máquina para averiguar cómo maneja nuevas líneas, desafortunadamente, y la documentación de Microsoft no especifica.

En cuanto a empujarlo al servidor, puede hacer eso con AJAX tirando del contenido de texto de los elementos en cuestión (o simplemente hacer que todo el <div> sea satisfactorio), construyendo una matriz de sus contenidos de texto, y luego POSTING al servidor. Esto es bastante fácil de hacer con jQuery (se puede proporcionar más ayuda con esto a pedido).