Líneas nuevas y contenteditable con etiquetas anidadas no editables

Tengo una caja impar para elementos contenteditable dentro de HTML. Tenemos un editor de texto enriquecido en el que los clientes cargan plantillas prefabricadas (por nosotros), y luego pueden modificar esa plantilla como quieran (principalmente).Líneas nuevas y contenteditable con etiquetas anidadas no editables

Las partes de nuestras plantillas se han marcado para que no se puedan editar directamente, pero se pueden quitar, etc. Sin embargo, parece haber un problema cuando un elemento es el primer elemento de una línea (directamente después de una etiqueta <br/>), y el usuario marca el DEL en la línea superior. Debido a que es contenteditable=false, el navegador parece eliminar no el <br/>, sino todo el tramo no editable.

HTML de ejemplo es como esto

<div contenteditable=true> 
    <span>blah blah blah</span><br/> 
    <span contenteditable="false">You cant edit this value directly</span> 
</div>

Si el usuario pone el cursor después de la blah blah blah, y le pega DEL se borra todo el contenido editable siguiente, en lugar del salto de línea.

¿Hay alguna manera, javascript o de otro modo, para corregir este comportamiento?

Ive engañado tratando de detectar la posición del cursor (utilizando rangos), e insertando espacios temporales, etc., pero no puedo conseguir que tenga el comportamiento deseado, que es solo que la etiqueta no editable se lleva hasta la línea anterior.

Hemos limitado el uso del editor solo a Chrome, por lo que no debe preocuparse por IE o FF.

jsfiddle of an example

Fuente

2012-07-12 Thomas Jones

¿'
' es parte de su plantilla? Si es así, ¿no podrías usar 3 'div' en lugar de usar'
'? –

Sí. Por razones que no estoy del todo seguro (probablemente para la representación), hemos anulado la tecla Enter para insertar un salto de línea en lugar de permitir que el navegador inserte, en este caso, divs. –

Otra solución podría ser tomar el control total sobre los eventos clave de eliminación. Puede usar la funcionalidad heredada cuando sea necesario y bloquear el evento cuando no sea deseable. O incluso use una lógica de eliminación 100% personalizada. * Editar: * Admitido obtener la posición de intercalación puede ser un poco complicado, pero sin duda es posible. –

Hacer cada tramo contenteditable, a continuación, el usuario no será capaz de eliminar el lapso que no desea editar, y deshacerse de la div siendo editable.

aquí está mi versión de la jsFiddle: http://jsfiddle.net/howderek/HgRsF/2/

Fuente

2012-08-01 21:03:20 howderek

Esta es una solución potencial, pero no se ajusta a lo que necesitamos, ya que está dentro del alcance de un editor de texto enriquecido y div es el bloque del área editable. Los tramos dentro del div son el resultado de una serie de operaciones para darle un estilo al texto de cierta manera. –

Ok. ¿Puedo preguntar por qué quieres que un tramo esté a salvo de la edición aunque esté dentro del área de edición? – howderek

fue una mala decisión de diseño desde el principio, y desafortunadamente el producto está lo suficientemente avanzado como para quedarse atorado.Esos tramos particulares son valores reutilizables, cuyo contenido se maneja de manera diferente y se pueden conectar a varios documentos diferentes. No son editables desde la sección de contenido, por lo que los usuarios se ven obligados a usar la naturaleza reutilizable de ellos. La verdadera solución aquí era manejar manualmente las teclas de enter/delete cuando teníamos que hacerlo, y tenemos una solución adecuada para eso, pero aún imperfecta –

La pregunta es a partir de 2012, y desde entonces este problema se solucionó y anidarse contenteditable etiquetas funciona como es debido. Todavía hay algunos problemas como this bug, pero en general la característica debe ser utilizable.

Fuente

2014-08-18 14:35:00 mik01aj

Esto parece estar apareciendo en el ejemplo de JSFiddle vinculado anteriormente en mi navegador (Chrome 40) – Chris

Líneas nuevas y contenteditable con etiquetas anidadas no editables

Respuesta

Cuestiones relacionadas