html - nbsp - Forzar elemento contentEditable de IE para crear saltos de línea en la tecla Intro, sin romper Deshacer

salto de linea html/n

Question

En Internet Explorer, un DIV contentEditable crea un nuevo párrafo ( <p></p> ) cada vez que presionas Enter, mientras que Firefox crea una etiqueta <br/> .

Como se analiza here , es posible usar JavaScript para interceptar la tecla Entrar y presionar range.pasteHTML para crear un <br/> lugar. Pero hacer esto rompe el menú Deshacer; una vez que presionas Enter, ya no puedes deshacer más allá de ese punto.

¿Cómo puedo forzar el elemento contentEditable para crear saltos de línea individuales en Enter sin romper Deshacer?

Answer 1

Considere usar <span contenteditable="true"></span> cuando use Internet Explorer. Es posible que no quieras hacer esto con Chrome porque el enfoque parece divertido. Probablemente querrá implementar su propio código onfocus y onblur .

Answer 2

IE vincula el nodo de texto con una etiqueta <p> al presionar la tecla Intro . Para lograr un salto de línea Shift + Enter . Firefox agrega una etiqueta <br> al presionar la tecla Intro . Para hacer que el comportamiento sea común en ambos navegadores, puede hacer lo siguiente:

Supongamos el siguiente marcado:

<div id="editableDiv" contentEditable="true"></div>

Javascript [suponga que el código de abajo está en una función de cierre para que no hinche la página con los globales]:

 (function () {
     //Initialize _shiftKeyPressed to false
     var _shiftKeyPressed = false;
     $(''#editableDiv'').live(''keydown'', function (e) {
         if (e.keyCode == 16) {
             // SHIFT key is pressed
             _shiftKeyPressed = true;
         }
     }).live(''keyup'', function (e) {
         if (e.keyCode == 16) {
             // SHIFT key is release
             _shiftKeyPressed = false;
         }
     }).live(''keypress'', function (e) {
         if (e.keyCode == 13 && !_shiftKeyPressed && !jQuery.browser.msie) {
             // Insert a PARAGRAPH in Firefox instead of a BR
             // Ignores SHIFT + ENTER
             document.execCommand("insertParagraph", false, true);
         }
     })
 })();

Nota: esta secuencia de comandos es anterior a jQuery <1.9 para el uso del $.browser obsoleto

Answer 3

Mantenga presionada la tecla Mayús cuando presiona Entrar para los descansos, no la presione para párrafos completos. Este comportamiento es el mismo de forma predeterminada en Firefox, dado un área editable que contiene un párrafo: es decir,

<div contenteditable="true">
    <p>If you are typing here</p>
<div>

Answer 4

No es una solución exacta, pero otra solución. Si usas el marcado:

<div contenteditable="true">
<div>
content
</div>
<div>

Luego, presionando enter creará nuevas etiquetas div lugar de etiquetas p .

Answer 5

Probablemente vas a publicar el contenido editable de nuevo en un servidor. Por lo tanto, no debe preocuparse si tiene etiquetas de párrafo o ruptura en su lugar mientras el usuario está editando, ya que puede analizar el HTML antes del envío (o en el servidor, si lo desea) y reemplazar las instancias de párrafos con saltos. Esto mantiene la cola UNDO en operación para el usuario, pero le permite tener su HTML tan limpio como lo desea.

También presumiré que vas a saber exactamente qué elementos del DIV serán contentables editables. Antes de enviar el formulario, puede ejecutar cada div contentEditable a través de una función como esta:

function cleanContentEditableDiv(div) {
  var htmlString = div.innerHTML;
  htmlString     = htmlString.replace(/<//p>/gim,"<br/>");
  htmlString     = htmlString.replace(/<p>/gim,"");
  return htmlString;
}

Y lo llamas en un bucle (que recorre todos los DIV editables de contenido, utilizando una matriz a la que llamaré ceDivs), así:

ceDivs[i].contentEditable = false; // to make sure IE doesn''t try to coerce the contents again

y entonces:

ceDivs[i].innerHTML = cleanContentEditableDiv(ceDivs[i]);

Una mejora en esto (especialmente si no desea hacerlo correctamente en el momento del envío), podría ser limpiar el contenido de cada div. En cualquier otro momento que desee (onblur, lo que sea) y asignar el contenido de cada ceDiv a su Propio elemento de forma invisible para su posterior envío. Utilizado en combinación con su propia sugerencia de CSS anterior, esto podría funcionar para usted. No conserva los requisitos literales de la letra (es decir, no obtiene Javascript para hacer que IE se comporte de manera diferente a como se ha codificado en las portadas), pero para todos los efectos prácticos, el efecto es el mismo. Los usuarios obtienen lo que quieren y tú obtienes lo que quieres.

Mientras esté en ello, es posible que también desee limpiar las cadenas de espacio en IE. Si el usuario escribe espacios múltiples (como algunos aún lo hacen después de períodos), lo que IE inserta no es [espacio] [espacio] sino [espacio] & nbsp ;, un carácter de espacio inicial (String.fromCharCode (32)) más tantos & nbsp; Entidades como las que quedan en el espacio ejecutado.

Answer 6

Puede ser imposible hacer esto bien. Sin embargo, es posible hacer que las etiquetas <p> vean como saltos de línea individuales, eliminando el margen incorporado alrededor de las etiquetas de párrafo, usando CSS:

p { margin: 0; }

Hay una desventaja de este enfoque: si el usuario necesita copiar / pegar texto en el elemento contentEditable, el texto puede aparecer con un espacio simple dentro del elemento pero doble espacio fuera del elemento.

Peor aún, al menos en algunos casos, IE detectará automáticamente saltos de línea doble durante el pegado, reemplazándolos con etiquetas <p> ; Esto ensuciará el formato del texto pegado.

Answer 7

Use <BR> lugar de <P> (probado en IE9. Tal vez nbsp; sea ​​necesario en versiones anteriores después de <BR> (pasteHTML("<br>&nbsp;")) )

Úsalo en el evento keydown:

if (e.keyCode == 13) {
 var range = document.selection.createRange();
 range.pasteHTML("<br> ");
 range.moveStart("character", 0);
 range.moveEnd("character", -1);
 range.select();
 return false;
}