Traiter avec des Sauts de ligne sur contentEditable DIV
J'ai un problème avec contenteditable
les sauts de ligne sur SAFARI/CHROME. Lorsque j'appuie sur "retour" sur un contentEditable <div>
, au lieu de créer un <br>
(comme Firefox), ils créent un nouveau <div>
:
<div>Something</div>
<div>Something</div>
Qui ressemble (sur la contentEditable DIV):
Something
Something
Mais après nettoyage (suppression de <div>
), j'obtiens ceci:
SomethingSomething
Dans Firefox, la contenteditable
est:
Something
<br>
Something
Et qu'après assainissement de l'air d'être le même:
Something
Something
Est-il une solution pour "normaliser" cette manière sur tous les navigateurs?
J'ai trouvé ce code sur Faire un <br> au lieu de <div></div> en appuyant sur Enter sur un contenteditable
$(function(){
$("#editable")
//make sure br is always the lastChild of contenteditable
.live("keyup mouseup", function(){
if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
this.appendChild(document.createChild("br"));
}
})
//use br instead of div div
.live("keypress", function(e){
if (e.which == 13) {
if (window.getSelection) {
var selection = window.getSelection(),
range = selection.getRangeAt(0),
br = document.createElement("br");
range.deleteContents();
range.insertNode(br);
range.setStartAfter(br);
range.setEndAfter(br);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
return false;
}
}
});
});
Cela fonctionne, mais (dans SAFARI et CHROME) je dois appuyer sur deux fois la touche "retour" pour obtenir une nouvelle ligne...
Une idée?
Modifier: Avec le code que j'ai trouvé ( en bas de cette question) fonctionne bien sauf la fonction "permet de s'assurer un <br>
élément est toujours lastChild... une idée sur comment résoudre ce problème?
Edit 2: je reçois ce message d'erreur sur la console: Uncaught TypeError: Object #<HTMLDocument> has no method 'createChild'
Edit 3: Ok, j'ai changé le document.createChild("br");
à document.createElement("br");
et je pense que je l'ai eu à travailler dans FF/Safari/Chrome... Tout retour <br>
pour les nouvelles lignes...
Le problème est que quand je suis à l'intérieur d'un ordre ou d'une Liste non triée, j'ai besoin d'obtenir une nouvelle ligne sans <br>
...
Edit 4: Si quiconque s'intéresse à la solution de la dernière modification: Éviter createElement fonction de si c'est à l'intérieur d'un <LI> élément (contentEditable)
- quelle est votre méthode de désinfection ressembler?
- Il supprime juste tous les <div>... je suis en utilisant github.com/gbirke/Sanitize.js Le problème, c'est que Safari/Chrome, lorsque j'appuie sur le retour, ils suffit de créer un nouveau DIV au lieu de faire un <BR> comme Firefox
- Peut-être que vous pouvez utiliser $("div:vide").remplaceavec("<br/>");
- Avez-vous trouvé quelque chose d'utile pour le bug des deux clefs de retour? J'ai tombé sur le même problème, la seule chose que je semble être en mesure de faire, c'est un hack (ajouter une zone de texte vide et sélectionnez-le donc, si vous continuez à écrire il disparaîtra automatiquement), je vais poster sur ce thread juste au cas où. Il n'est pas parfait, mais il fonctionne.
- Firefox dispose maintenant d'une approche hybride: elle enveloppe l' <br>s à l'intérieur <div>s. Cela lui permet de se comporter de la même manière pour google Chrome, j'imagine, parce que réagir enlève le <div>s entièrement, y compris les <br>s.
Vous devez vous connecter pour publier un commentaire.
C'est une technique pour éviter le Chrome bug qui ne montrent BRs la première fois (avec le code que vous avez mentionné que vous devez poussez deux fois la touche Entrée).
Il n'est pas parfait hack, mais il fonctionne: il ajoute un espace après votre BR afin de l'afficher correctement.
Cependant, vous verrez que l'ajout de seulement un espace "" NE changera rien, il travaille avec d'autres lettres. Le navigateur ne sera pas le montrer, probablement parce que c'est comme un espace vide à l'intérieur d'une page html, il suffit simplement de ne pas dire n'importe quoi. Pour se débarrasser de ce bug, j'ai créé un div avec jQuery qui comprend un
tag, et je prends letext()
propriété de le mettre dans le textnode sinon ça ne marche pas.L'écoute de frappes ressemble à beaucoup de travail. Serait quelque chose d'aussi simple que ce soit possible:
JSFiddle démo ici.
Aussi, il ressemble sanitize.js permet une configuration personnalisée. Avez-vous essayé d'ajouter
div
comme un élément?Permettant HTML/CSS est dangereux, afin de vous assurer que vous être très prudent.
EDIT: serveur Supprimé côté des commentaires. La désinfection se produit au moment de l'utilisation, si le client veut contourner cette localement, il peut être fait à ses propres risques. Grâce Vincent McNabb pour le rappeler.
Vous pouvez simplement utiliser la commande suivante
document.execCommand('insertHTML',false,'<br>');
Cette commande permettra d'éviter le comportement par défaut et ajouter un tag que vous souhaitez.
C'est tout, 1 ligne de code
Et encore plus facile d'approche.
CSS.
Vous contenteditable élément appliquer
display:inline-block
règleet cela va ajouter brs seulement
Webkits de ne pas rendre une seule
br
si c'est le dernier (non vide) de l'enfant d'un conteneur. Pour Safari, le natif de touche pour insérer un saut de ligne Ctrl + Retour. Si vous regardez de près, vous remarquez que Safari, en fait insère deuxbr
s, tandis que seulement rendu; en revanche, il va insérer une seulebr
si il ya une fuite de texte, ou de se débarrasser de la doublebr
s une fois que vous entrez (si il y avait des doubles).Apparemment, cela semble une solution pour Webkits est à insérer double
br
s qu'ils ne font eux-mêmes, et de les laisser gérer le reste.Vous voudrez peut-être consulter le css
white-space
de la propriété. Définir le style dewhite-space: pre-wrap
vous permet de vous débarrasser de tout ce qui javascript, parce qu'elle modifie le comportement des espaces d'affichage au lieu de s'effondrer.Et de voir cette réponse: HTML - Newline char dans la DIV de contenu modifiable?
voir ce Violon
Ou ce post
Comment analyser modifiable DIV du texte avec la compatibilité du navigateur