Vigueur IE contentEditable élément pour créer des sauts de ligne sur la touche Enter, sans casser Annuler

Sur Internet Explorer, une contentEditable DIV crée un nouveau paragraphe (<p></p>) chaque fois que vous appuyez sur Entrée alors que Firefox crée un <br/> tag.

Comme discuté ici, il est possible d'utiliser JavaScript pour intercepter l'Entrée de pression de touches et l'utilisation de la gamme.pasteHTML pour créer un <br/> à la place. Mais cela rompt le menu Annuler; une fois que vous appuyez sur Entrée, vous ne pouvez plus Annuler-delà de ce point.

Comment puis-je forcer le contentEditable élément pour créer des sauts de ligne uniques sur Entrer sans casser l'Annuler?

Bon point - et même la disposition des Éditeurs WYSIWYG peut vous aider avec ceci, qu'ils mettent en œuvre leurs propres systèmes d'annuler.

InformationsquelleAutor Dan Fabulich | 2010-02-08

17

Pas une solution exacte, mais une autre solution. Si vous utilisez le balisage:
```
<div contenteditable="true">
<div>
content
</div>
<div>
```
Puis en appuyant sur entrée permettra de créer de nouveaux div tags lieu de p balises.
- Intéressant! J'avais lu à ce sujet d'ailleurs, mais pour une raison que je ne pouvais pas la technique de travail avant. Essayé tout à l'heure dans une simple page HTML et il a travaillé beaucoup dans IE6, IE8 FF36 CG4. Toutefois, si l'utilisateur parvient à supprimer l'intérieure de la DIV, il revient à <p> pauses.
- Vrai, et je ne sais pas comment vous pouvez l'éviter. À l'origine contenteditable a été un propriétaire de Microsoft attribut qu'ils ont mis en œuvre quelle que soit la façon dont ils voulaient, certains de ce qui est logique, mais la plupart de qui a beaucoup trop de bugs. Les FF de la mise en œuvre est moins buggé mais n'certaines des choses non standards (entrée devrait vraiment créer de nouveaux paragraphes). Ici en espérant que IE9 revient sur cette fonctionnalité. Pour atteindre un semblant de cohérence entre eux, vous devez vraiment envisager de javascript.
- euw!vérifier les rasoirs de répondre à la place!
- J'ai trouvé aussi que si vous ajoutez une classe à l'intérieur de la DIV IE ajoute la même classe à la création de DIVs. Cela peut être une astuce utile pour sélectivement le remplacement ou le filtrage de ces balises. De toute façon, c'est une belle solution simple et il a travaillé pour moi.
- Je ne peux pas confirmer l'application de balises p (il n'a jamais créé les balises p, mais divs), mais la solution pour envelopper le contenu dans une balise extérieure semble être un bon travail pour éviter les sauts de ligne, la création de mise en page de rupture des éléments que vous n'avez aucun contrôle sur.
InformationsquelleAutor Joel
5

Maintenez la touche maj enfoncée lorsque vous appuyez sur entrée pour les pauses, ne pas la maintenir enfoncée pour des paragraphes entiers. Ce comportement est le même par défaut dans Firefox, compte tenu d'une contenteditable zone contenant un paragraphe: c'est à dire
```
<div contenteditable="true">
    <p>If you are typing here</p>
<div>
```
- C'est un bon point, mais je ne peux pas attendre mes utilisateurs n'oubliez pas de le faire de manière cohérente.
- Les gens peuvent savoir la convention s'ils utilisent le Mot Parfait, Open Office ou encore Word de Microsoft que ces toutes le même comportement. Une note à cet effet pour l'accompagner l'éditeur devrait suffire. La promotion de la convention plutôt que d'essayer de le casser.
- Je suis totalement d'accord 🙂 C'est un truc que mes utilisateurs rarement oublier une fois qu'ils l'ont appris. C'est dans le même espace que la touche Ctrl pour sélectionner des lignes dans une feuille de calcul.
InformationsquelleAutor Fenton
4

Je suppose que vous allez poster le contenu modifiable retour à un serveur. Par conséquent, vous ne devriez pas vraiment se préoccuper de savoir si vous avez paragraphe ou les balises de saut en place pendant que l'utilisateur est l'édition, parce que vous pouvez analyser le code HTML avant la soumission (ou sur le serveur, si vous le souhaitez) et de remplacer les occurrences de paragraphes avec des pauses. Cela permet de maintenir l'ANNULATION de la file d'attente de l'utilisateur, mais vous permet d'avoir votre code HTML aussi propre que vous le voulez.

Je vais encore présumer que vous allez savoir exactement quels éléments DIV vont être contentEditable. Avant l'envoi du formulaire, vous pouvez exécuter chaque contentEditable div grâce à une fonction comme ceci:
```
function cleanContentEditableDiv(div) {
  var htmlString = div.innerHTML;
  htmlString     = htmlString.replace(/<\/p>/gim,"<br/>");
  htmlString     = htmlString.replace(/<p>/gim,"");
  return htmlString;
}
```
Et vous appelez cela dans une boucle qui itère sur tous les contentEditable DIVs, à l'aide d'un tableau je vais appeler ceDivs), comme ceci:
```
ceDivs[i].contentEditable = false; //to make sure IE doesn't try to coerce the contents again
```
et puis:
```
ceDivs[i].innerHTML = cleanContentEditableDiv(ceDivs[i]);
```
Une amélioration sur ce (surtout si vous ne voulez pas faire de ce droit, au moment de l'envoi), peut-être de nettoyer le contenu de chacune de ces div tout autre moment que vous le souhaitez (onblur, peu importe) et affecter le contenu de chaque ceDiv à ses propres invisible élément de formulaire pour la présentation ultérieure. Utilisé en combinaison avec votre propre feuille de style CSS suggestion ci-dessus, cela pourrait fonctionner pour vous. Il ne conserve pas vos littérale exigences à la lettre (c'est à dire, qu'il ne soit pas le langage Javascript pour IE se comportent différemment de ce qu'il a été codé sous les couvertures pour se comporter), mais à toutes fins pratiques, l'effet est le même. Les utilisateurs obtiennent ce qu'ils veulent et vous obtenez ce que vous voulez.

Pendant que vous y êtes, vous pouvez également nettoyer l'espace des chaînes dans IE ainsi. Si l'utilisateur types d'espaces multiples (comme certains continuent de le faire après des périodes), ce qui est inséré par IE n'est pas [espace][espace] mais [espace] , un premier espace de caractères (String.fromCharCode(32) plus que de nombreux   entités qu'il y a à gauche dans l'espace exécuter.
- Je travaille sur un côté client de l'éditeur. Copier et coller dans et hors de l'modifiable élément est très important, de sorte que t question de savoir si les sauts de ligne sont conservés.
- Robusto fait un très bon point sur le nettoyage de l'html. Contenteditable produit certains des pires html vos yeux jamais vu. L'assainissement du html sur le serveur en tout cas, c'est une bonne idée. C'est ce que l'aide de html pour le côté client de balisage est jamais une bonne idée. On a abandonné l'appui des clients qui veulent copier coller à partir de word dans le long terme, personne n'obtient plus heureux :$
- Je suis d'accord que le fait de nettoyer le code HTML est une bonne idée, mais une fois que j'ai nettoyer le code HTML, vous ne pouvez plus utiliser le menu Annuler pour annuler les modifications! C'est tout le sens de ma question.
- Dan, deux points: 1. Dans le schéma, je l'ai suggéré, vos sauts de ligne est préservé. Ils sont juste rejiggered après le fait. 2. Si vous laissez le nettoyage jusqu'à ce que le formulaire est soumis, vous laissez l'utilisateur avec l'ensemble de l'ANNULATION de la file d'attente. Il ne faudrait pas attendre d'avoir économisé après la soumission du formulaire.
- Robusto, je suis en train de générer, à simple interligne lignes au moment où l'utilisateur appuie sur la touche Entrée, sans casser Annuler à chaque fois que l'utilisateur appuie sur Entrée. Nettoyage à côté serveur est une bonne pratique, mais rien à voir avec mon problème.
InformationsquelleAutor Robusto
4

Utilisation <BR> au lieu de <P> (Testé dans IE9. Peut-être nbsp; est nécessaire dans les anciennes versions après <BR> (pasteHTML("<br> ")) )

L'utiliser sur de l'événement keydown:
```
if (e.keyCode == 13) {
 var range = document.selection.createRange();
 range.pasteHTML("<br> ");
 range.moveStart("character", 0);
 range.moveEnd("character", -1);
 range.select();
 return false;
}
```
- C'est la bonne réponse
- Est-ce IE seule solution? Comment sur d'autres navigateurs?
- RAPPELEZ - 13-clé peut être un élément de liste de l'insertion
- Aussi, ne travaillant pas dans IE11
InformationsquelleAutor razor
2

Il peut être impossible d'obtenir ce droit. Toutefois, il est possible de faire la <p> tags look comme un seul des sauts de ligne, en retrait de la marge intégrée autour des étiquettes de paragraphe, à l'aide de CSS:
```
p { margin: 0; }
```
Il y a un inconvénient de cette approche: si l'utilisateur a besoin de copier/coller le texte dans la contentEditable élément, le texte peut sembler être à simple interligne à l'intérieur de l'élément, mais à double interligne à l'extérieur de l'élément.

Pire, dans certains cas au moins, IE va automatiquement détecter les doubles-sauts de ligne lors de la pâte, en les remplaçant par <p> balises; cela embrouillerait la mise en forme du texte collé.
- Meta côté: je suis normalement réticent à publier une réponse à ma propre récompense, mais il a été de quatre jours et pas de réponse; j'ai hate de voir ces points de disparaître dans l'éther...
- Meilleure solution de l'OMI. Depuis IE11 ne pas envoyer "msie" user-agent de plus, nous avons à écrire un tout nouveau cas pour elle, avec un tout nouveau tas de hacks... Darn it - permet de faire de la marge-chose.
InformationsquelleAutor Dan Fabulich

IE lie le nœud de texte avec un <p> balise Entrée appuyez sur une touche. Pour réaliser un saut de ligne Maj+Entrée. Firefox ajoute un <br> balise Entrée appuyez sur une touche. Pour que le comportement commun à travers les deux navigateurs, vous pouvez effectuer les opérations suivantes:

Assumer le balisage suivant:

<div id="editableDiv" contentEditable="true"></div>

Javascript [assumer le code ci-dessous est une fonction de fermeture afin de ne pas gonfler la page avec globals]:

 (function () {
     //Initialize _shiftKeyPressed to false
     var _shiftKeyPressed = false;
     $('#editableDiv').live('keydown', function (e) {
         if (e.keyCode == 16) {
             //SHIFT key is pressed
             _shiftKeyPressed = true;
         }
     }).live('keyup', function (e) {
         if (e.keyCode == 16) {
             //SHIFT key is release
             _shiftKeyPressed = false;
         }
     }).live('keypress', function (e) {
         if (e.keyCode == 13 && !_shiftKeyPressed && !jQuery.browser.msie) {
             //Insert a PARAGRAPH in Firefox instead of a BR
             //Ignores SHIFT + ENTER
             document.execCommand("insertParagraph", false, true);
         }
     })
 })();

Remarque: ce script est avant jQuery < 1,9 pour l'utilisation de l'obsolète $.browser

comment définir l'attribut de balise de paragraphe formé par execComand.

InformationsquelleAutor nairvijays

0

Envisager d'utiliser <span contenteditable="true"></span> lors de l'utilisation d'Internet Explorer. Vous ne voulez pas le faire avec Chrome car l'accent est drôle. Vous aurez probablement envie de mettre en place votre propre onfocus et onblur code.

InformationsquelleAutor Bryan Field

Vous devez vous connecter pour publier un commentaire.