es decir, evitar elemento contentEditable para crear párrafos sobre la tecla Enter

Question

En InternetExplorer, un contentEditable DIV crea un nuevo párrafo (<p></p>) cada vez que se pulsa Intro mientras que Firefox crea una etiqueta <br/>. ¿Es posible forzar IE para insertar un <br/> en lugar de un nuevo párrafo?

Answer 1

Sí, es posible evitar la inserción de los párrafos deteniendo el evento keydown primero (window.event.stopPropagation();) y luego insertar la cadena utilizando inserto de comandos HTML.

Sin embargo, IE depende de esta divs para el establecimiento de estilos, etc., y que se meterá en problemas usando
s.

Le sugiero que el uso de un proyecto como TinyMCE u otros editores y la búsqueda de un editor que se comporta de la manera que le gustaría, ya que tienen todo tipo de soluciones para los diferentes problemas del navegador. Tal vez pueda encontrar un editor que utiliza
s ...

Answer 2

Aquí hay una solución (utiliza jQuery). Después de hacer clic en 'Cambiar a BR' botón, se insertará la etiqueta <br> 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);
}

Estos href="http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML12/jsdhtml12-02.htm" rel="nofollow noreferrer"> ayudaron . Ejemplo de trabajo aquí .

Answer 3

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

Answer 4

Cambio de la line-height del <p> dentro del <div> editable funciona:

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

Answer 5

Si se puede usar, FCKEditor tiene un escenario de este