éviter à savoir l'élément contentEditable pour créer des paragraphes sur la touche Entrée

StackOverflow https://stackoverflow.com/questions/2057881

  •  20-09-2019
  •  | 
  •  

Question

Sur InternetExplorer, un contentEditable DIV 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?

Était-ce utile?

La solution

Oui, il est possible d'éviter l'insertion des paragraphes en arrêtant l'événement KeyDown premier (window.event.stopPropagation();), puis insérer la chaîne à l'aide d'insertion commande HTML .

Cependant, IE dépend de ce divs pour définir des styles, etc., et vous aurez des ennuis en utilisant
s.

Je vous suggère de l'aide d'un projet comme TinyMCE ou d'autres éditeurs et rechercher un éditeur qui se comporte de la façon dont vous le souhaitez, car ils ont toutes sortes de solutions de contournement pour les différents problèmes de navigateur. Peut-être que vous pouvez trouver un éditeur qui utilise
s ...

Autres conseils

Voici une solution (utilise jQuery). Après avoir cliqué sur le « changement de BR » bouton, la balise <br> sera inséré à 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);
}

Ces Liens aidé . Exemple de travail .

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

Modification du line-height du <p> intérieur du <div> modifiable fonctionne: 

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

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top