avoid ie élément contentEditable pour créer des paragraphes sur la touche Entrée

Question

Sur InternetExplorer, un DIV contentEditable crée un nouveau paragraphe (<p></p>) chaque fois que vous appuyez sur Entrée alors que Firefox crée une balise <br/>. Est-il possible de forcer IE à insérer un <br/> au lieu d'un nouveau paragraphe?

Answer 1

Oui, il est possible d'éviter l'insertion de paragraphes en arrêtant d'abord l'événement keydown (window.event.stopPropagation();) puis en insérant la chaîne à l'aide de l'insertion HTML command.

Cependant, IE dépend de ce divs pour les styles de réglage etc. et vous aurez des problèmes en utilisant <br> s.

Je vous suggère d'utiliser un projet comme TinyMCE or other editors et de rechercher un éditeur qui se comporte comme vous le souhaitez, car ils ont toutes sortes de solutions de contournement pour différents problèmes de navigateur. Peut-être que vous pouvez trouver un éditeur qui utilise <br> s ...

Answer 2

Si vous pouvez l'utiliser, FCKEditor a un cadre pour cette

Answer 3

est ici une solution (utilise jQuery). Après avoir cliqué sur le bouton "Changer en BR", la balise <br> sera insérée à la place de la balise <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. Exemple de travail here.

Answer 4

Vous pouvez toujours apprendre à utiliser SHIFT +ENTER pour les retours en ligne simple et ENTER pour les retours de paragraphe. IE se comporte comme MS Word à cet égard.

Answer 5

Modification du line-height du <p> dans les œuvres <div> modifiables:

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