evitare cioè elemento contentEditable Per creare dei paragrafi sul tasto Invio

Question

In InternetExplorer, un contentEditable DIV crea un nuovo paragrafo (<p></p>) ogni volta che si preme Invio mentre Firefox crea un tag <br/>. E 'possibile forzare IE per inserire una <br/> invece di un nuovo paragrafo?

Answer 1

Si, è possibile evitare l'inserimento dei paragrafi arrestando KeyDown prima (window.event.stopPropagation();) e quindi inserendo la stringa utilizzando inserto comando di HTML .

Tuttavia, IE dipende da questo div per impostare gli stili, ecc e si otterrà nei guai con
s.

Vi suggerisco di utilizzare un progetto come TinyMCE o altri editor e cercare un editor che si comporta il modo in cui si desidera, dal momento che hanno tutti i tipi di soluzioni per i diversi problemi di browser. Forse si può trovare un editore che utilizza
s ...

Answer 2

Ecco una soluzione (utilizza jQuery). Dopo aver fatto clic su 'Cambia per BR' pulsante, verrà inserito il tag <br> posto del tag <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);
}

Questi href="http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML12/jsdhtml12-02.htm" rel="nofollow noreferrer"> aiutato . esempio di lavoro qui .

Answer 3

Si può sempre imparare a usare SHIFT + INVIO per la linea ritorna singoli e INVIO per i ritorni di paragrafo. IE si comporta come MS Word in questo senso.

Answer 4

La modifica della line-height del <p> all'interno del <div> modificabile funziona:

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

Answer 5

Se si può utilizzare, FCKEditor ha una cornice a questo