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.
InformationsquelleAutor Santiago | 2011-05-16
  1. 28

    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 &nbsp; tag, et je prends le text() propriété de le mettre dans le textnode sinon ça ne marche pas.

    $editables = $('[contenteditable=true]');

$editables.filter("p,span").on('keypress',function(e){
 if(e.keyCode==13){ //enter && shift

  e.preventDefault(); //Prevent default browser behavior
  if (window.getSelection) {
      var selection = window.getSelection(),
          range = selection.getRangeAt(0),
          br = document.createElement("br"),
          textNode = document.createTextNode("\u00a0"); //Passing " " directly will not end up being shown correctly
      range.deleteContents();//required or not?
      range.insertNode(br);
      range.collapse(false);
      range.insertNode(textNode);
      range.selectNodeContents(textNode);

      selection.removeAllRanges();
      selection.addRange(range);
      return false;
  }

   }
});
    • J'ai modifié votre solution dans un plugin jQuery: jsfiddle.net/QBhR4/5
    • Ajouter une plage.deleteContents(); avant de la choisir.removeAllRanges();pour se débarrasser de ces satanés &nbsp; tout en gardant tout le travail ^^
    • Ajout de document.execCommand('delete') juste avant le "return false" fait le tour et ne montre pas sélectionné les espaces de sélection.
    InformationsquelleAutor Micaël Félix
  2. 13

    L'écoute de frappes ressemble à beaucoup de travail. Serait quelque chose d'aussi simple que ce soit possible:

    var html = $('.content').html().replace(/<div>/gi,'<br>').replace(/<\/div>/gi,'');

    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.

    • Il ressemble à la suppression est effectuée à des fins d'affichage, pas à des fins de sécurité, auquel cas il est parfaitement raisonnable de le faire sur le client. Ils peuvent contourner si elles le veulent, et tout ce qu'il ferait, c'est de faire les choses moche pour eux.
    • Je crois que la suppression est effectuée à des fins de sécurité au moment de l'utilisation de l'e.g, décapage dangereux jetons pour une sortie HTML). Vous faites un excellent point que si le client veut contourner cette localement, il peut être fait à ses propres risques.
    InformationsquelleAutor Kurt
  3. 9

    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ègle
    et cela va ajouter brs seulement

    • Cette css approche est génial! Cheers @Karb
    • Aucune de ces deux solutions de travail pour moi. Essayé avec "keypress", "keydown" et "keyup", et avec ces deux solutions à la fois. Mais Firefox est toujours la création de DIVS :/
    InformationsquelleAutor Karb
  4. 2

    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 deux brs, tandis que seulement rendu; en revanche, il va insérer une seule br si il ya une fuite de texte, ou de se débarrasser de la double brs une fois que vous entrez (si il y avait des doubles).

    Apparemment, cela semble une solution pour Webkits est à insérer double brs qu'ils ne font eux-mêmes, et de les laisser gérer le reste.

    InformationsquelleAutor Klim Lee
  5. 1

    Vous voudrez peut-être consulter le css white-space de la propriété. Définir le style de white-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?

    • Ce problème se produit toujours n'importe quel espace blanc est réglé, cela a à voir avec contentEditable
    InformationsquelleAutor B T