evite es decir elemento contentEditable para crear párrafos en la tecla Intro

Question

En InternetExplorer, un contenido DIV crea un nuevo párrafo (<p></p>) cada vez que presiona Enter mientras Firefox crea una etiqueta <br/>. ¿Es posible obligar a IE a insertar un <br/> en lugar de un nuevo párrafo?

Answer 1

Sí, es posible evitar la inserción de párrafos deteniendo primero el evento de tecla (window.event.stopPropagation();) y luego insertando la cadena usando la inserción HTML command.

Sin embargo, IE depende de este divs para establecer estilos, etc. y usted tendrá problemas al usar <br> s.

Le sugiero que utilice un proyecto como TinyMCE or other editors y busque un editor que se comporte de la manera que le gustaría, ya que tienen todo tipo de soluciones para diferentes problemas del navegador. Tal vez pueda encontrar un editor que utiliza < br s ... >

Answer 2

Si se puede usar, FCKEditor tiene un escenario de este

Answer 3

he aquí una solución (utiliza jQuery). Después de hacer clic en el botón "Cambiar a BR", se insertará la etiqueta <br> en lugar de la etiqueta <p></p>.

HTML:

<div id='editable' contentEditable="true"> 
This is a division that is content editable. You can position the cursor 
within the text, move the cursor with the arrow keys, and use the keyboard 
to enter or delete text at the cursor position. 
</div> 
<button type="button" onclick='InsertBR()'>Change to BR</button> 
<button type="button" onclick='ViewSource()'>View Div source</button> 

Javascript:

function InsertBR() 
{ 
    $("#editable").keypress(function(e) { 
     if (e.which == 13) 
     { 
      e.preventDefault(); 
      document.selection.createRange().pasteHTML("<br/>")  
     } 
    }); 
} 

function ViewSource() 
{   
    var div = document.getElementById('editable'); 
    alert('div.innerHTML = ' + div.innerHTML); 
} 

Theselinkshelped. Ejemplo de trabajo here.

Answer 4

Siempre se puede aprender a utilizar SHIFT +ENTER para las devoluciones de una sola línea y ENTER de saltos de párrafo. IE se comporta como MS Word a este respecto.

Answer 5

Cambio de la line-height del <p> dentro de las obras editables <div>:

#editable_div p 
{ 
    line-height: 0px; 
}