HTML contento con islas no editables

Tengo una especie de editor WYSIWYG basado en navegador donde los usuarios pueden editar documentos-plantillas.

Document-template es un html ordinario con algunos “marcadores de posición de códigos de combinación” especiales. Dicha plantilla se “instancia” reemplazando estos marcadores de posición por datos provenientes de DB. Esto proporciona el documento final: una instancia de la plantilla.

Mi enfoque actual se ve así:

Sample template with .

(Muestra en línea para jugar con: http://jsfiddle.net/tFBKN/ )

La entrada no es editable en ese caso y se comporta como un bloque sólido, exactamente lo que necesito. Los usuarios pueden eliminar dichos códigos de fusión haciendo clic en DEL o RETROCESO como cualquier otro carácter, etc. Al tener CSS adecuado para tal input.mergecode, puedo lograr el look-and-feel que quiero.

Pero con ese enfoque tengo tres problemas diferentes en tres UA diferentes:

  • IE – CSS { font:inherit } simplemente no funciona allí, por lo que si la entrada está dentro de como aquí no hereda ningún estilo de fuente.
  • FF: la copia del fragmento que contiene el elemento elimina esa entrada del contenido del portapapeles para que la operación de pegado adicional inserte todo pero no las entradas.
  • GC – Haga clic en {ESPACIO RETROCESO} inmediatamente después de que la produzca resultados extraños ( error )

Por lo tanto, estoy buscando otras ideas sobre cómo representar “islas” similares a bloques en línea no editables en HTML.

Otro enfoque que he probado hasta ahora:

  • MergeCode1 – no funciona, ya que la mayoría de los UA eliminan dicho nodo de la selección. Por lo tanto, no es posible, por ejemplo, aplicar o sobre la selección que contenga dicho intervalo.

¿Alguna otra idea?

Soy un desarrollador de CKEditor. Tenemos cierta experiencia con los elementos de solo lectura nesteds (es decir, el complemento de placeholder y la función en la que estamos trabajando actualmente, n.º 9764 ) y no tengo buenas noticias. Debe controlar cada comportamiento de forma manual si desea tener un aspecto coherente. No hay trucos que arreglarán los navegadores. Y muchas cosas (como esta con cosas raras que suceden alrededor de la entrada en el GC) parecen ser insolubles.

Una idea más que parece prometedora:

Para usar span vacía con ::before { content:"caption"; } ::before { content:"caption"; } que debería producir bloque no editable representado en DOM como un nodo que no tiene posiciones de intercalación dentro.

Puedes intentarlo aquí http://jsfiddle.net/TwVzt/1/

Pero este enfoque no está exento de problemas (en mi caso): no hay forma de declarar ::before inline utilizando el atributo DOM de estilo, por lo que todo el conjunto debe declararse en CSS por adelantado. Pero el conjunto de códigos de fusión que tengo es bastante grande, incluso desconocido por adelantado en su totalidad en algunos casos de uso. Suspiro.

Sin embargo, poner esta receta aquí si alguien tendrá mejores circunstancias (conjunto conocido de códigos).

Sé que es un hilo viejo, que encontré con un problema similar. Solo necesité pocos tramos no editables en div editable. Terminó implementando un HACK-AROUND como …

 $('#testDiv').on('keydown', function(e) { var targetNode = getSelectionStart(); if(targetNode != undefined && targetNode.nodeType === 1 && targetNode.nodeName == 'SPAN') { var nodeHtmlString = targetNode.outerHTML; if(~nodeHtmlString.indexOf("nonEditable")) { e.preventDefault(); e.stopPropagation(); } } }); function getSelectionStart() { var node = document.getSelection().anchorNode; return (node.nodeType == 3 ? node.parentNode : node); } 

Completa el violín en https://jsfiddle.net/fxmb3nL6/20/

Solución a continuación – con una pequeña advertencia. Pero primero, ustedes son geniales!
No soy un experto en JS o HTML, pero tampoco sabía sobre jsfiddle.net. Entonces, al leer sus comentarios más otras búsquedas en línea, y algunas pruebas en jsfiddle, creé el siguiente código que funcionó.

 
 
Sample template with . editable uneditable1 editable2 uneditable3 editable4 uneditable5 < /div>

Si pones esto en jsfiddle en cromo, ves que funciona en cromo (y en IE y FF pero de manera un poco diferente), pero parece que hay una pequeña advertencia.

¡La advertencia es lo que hace tu enlace con Backspace! En mi caso, cuando selecciono una frase no editable y presiono la tecla de retroceso en cromo, parece actualizar, o hacer una “¡ir a la última página!” Hice los primeros dos rojos sin doblar (dejó el último negro) para que pueda ver lo que sucede. Lo pruebo en jsfiddle en Chrome y en FF y en IE. Todo parece haber actuado correctamente, dar o aceptar el problema del retroceso.

Y creo que esta es la lógica de cómo funciona. La primera Div es el padre de nivel superior, y es contenteditable = “falso”. Por lo tanto, todo lo que está debajo debe ser no editable. EXCEPTO los niños dentro de él que tienen span contenteditble = “verdadero” se vuelven editables. Entonces heredas de tu padre, pero luego puedes sobrescribirlo como un niño.

También puse las tags readonly = “true” UNSELECTABLE = “ON” porque leo sobre ellos en algún lugar. ¡Y tomó más pruebas! NOTA POR FAVOR, tuve que tomar Font … fuera del intervalo, o no funcionaría. Pero en IE funcionó a la perfección. Los ítems no editables eran del color que les dije que fueran, ¡y ninguna cantidad de clics individuales, dobles o triples seleccionaría los elementos no editables en jsfiddle! 🙂 Para Chrome, solo clic no hizo nada, haga doble clic en la opción no editable, y con el retroceso se volvió un poco loco. Parecía que iría a la página anterior. ¡Con FF las cosas estaban un poco locas! ¡Haga doble clic en el elemento no editable y el editable anterior! No tengo idea por qué.

Si alguien puede descubrir y escribir sobre los problemas con Chrome y FF, sería genial. Sería bueno tener doble clic o cualquier cantidad de clics rápidos que no funcionen en Chrome y FF también. Una vez más, quiero enfatizar que el lapso … parece tener que estar al lado de los no progtwigbles y de la fuente … fuera del lapso.

Espero que todo esto tenga sentido.

Para IE, prueba esto:

 Uneditable 

¡Tenga en cuenta el valor inverso del atributo contenteditable! Desafía todo el sentido común, pero funciona, al menos en IE8 e IE9. Este elemento no editable se puede mover y copiar / pegar. Sin embargo está lejos de ser perfecto. Por ejemplo, si resaltas una región que abarca el elemento no editable, esto infectará también el contenido del elemento no editable. Por lo tanto, probablemente tendrá que usar algunos scripts para mantener la cordura del elemento. También establecer contenteditable = “true” decorará el elemento no editable con los controles de tamaño. Puede volver a desactivarlos configurando unselectable = “on”, pero esto evitará que el objeto se arrastre. De nuevo, probablemente tendrá que confiar en un script que restaure el ancho y el alto.