evitare cioè elemento contentEditable per creare paragrafi sul tasto Invio

Question

Su InternetExplorer, un DIV contentEditable crea un nuovo paragrafo (<p></p>) ogni volta che si preme Invio mentre Firefox crea un tag <br/>. È possibile forzare IE a inserire un <br/> anziché un nuovo paragrafo?

Answer 1

Sì, è possibile evitare l'inserimento di paragrafi arrestando prima l'evento keydown (window.event.stopPropagation();) e quindi inserendo la stringa utilizzando l'inserto HTML command.

Tuttavia, IE dipende da questi div per l'impostazione di stili ecc. E ci si può mettere nei guai utilizzando <br> s.

Ti suggerisco di utilizzare un progetto come TinyMCE or other editors e di cercare un editor che si comporta come vorresti, poiché hanno tutti i tipi di soluzioni alternative per i diversi problemi del browser. Forse si può trovare un editore che utilizza <br> s ...

Answer 2

Se si può utilizzare, FCKEditor ha un'impostazione per questo

Answer 3

Ecco una soluzione (utilizza jQuery). Dopo aver fatto clic sul pulsante "Cambia in BR", verrà inserito il tag <br> anziché il 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); 
} 

Theselinkshelped. Esempio di lavoro here.

Answer 4

Si può sempre imparare ad usare SHIFT +ENTER per i ritorni a linea singola e ENTER per i ritorni di paragrafo. IE si comporta come MS Word in questo senso.

Answer 5

Modifica della line-height del <p> all'interno delle modificabili <div> opere:

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