Gérer les ruptures de ligne sur le divitable contented

cette technique semble éviter le bug Chrome qui montre BRs la première fois (avec le code que vous avez mentionné vous devez pousser deux fois la touche Entrée).

ce n'est pas un hack parfait mais il fonctionne: il ajoute un espace blanc après votre BR afin de montrer 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 simplement ne veut rien dire. Pour me débarrasser de ce bogue, j'ai créé une div avec jQuery qui inclut une balise   , et je prends la propriété text() pour la mettre dans le code 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;
  }

   }
});

écouter des frappes semble être beaucoup de travail. Est-ce que quelque chose d'aussi simple que cela serait faisable:

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

JSFiddle démo ici .

aussi, il ressemble à désinfectant.js permet une configuration personnalisée. Avez-vous essayé d'ajouter div comme un élément?

Autoriser HTML / CSS est dangereux, donc assurez-vous d'être extrêmement prudent.

EDIT: Retiré de côté de serveur de 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. Merci Vincent McNabb de l'avoir souligné.

, Vous pouvez simplement utiliser la commande suivante document.execCommand('insertHTML',false,'<br>');

cette commande empêchera le comportement par défaut et ajoutera une balise que vous souhaitez. C'est tout, 1 ligne de code

Et encore plus facile d'approche.

CSS SEULEMENT.

contenteditable élément appliquer display:inline-block règle et ceci ajoutera br S seulement

ne rendront pas un seul br s'il s'agit du dernier enfant (non vide) d'un conteneur. Pour Safari, la touche native pour insérer un saut de ligne est Ctrl + Return. Si vous regardez attentivement, vous remarquez que Safari insère en fait deux br s tout en n'en rendant qu'un; cependant, il insérera un seul br s'il y a un texte traînant, ou se débarrassera du double br s Une fois que vous en entrez quelques-uns (s'il y avait des doubles).

apparemment, il il semble qu'une solution pour Webkits est d'insérer double br s comme ils le font eux-mêmes, et les laisser gérer le reste.

vous pourriez vouloir consulter la propriété css white-space . Paramétrer le style à white-space: pre-wrap vous permet de vous débarrasser de tout ce javascript, parce qu'il change le comportement des espaces à afficher au lieu de s'effondrer.

et voir cette réponse: HTML - newline char in DIV content editable?

voir ce violon

Ou ce post

comment analyser le texte de editable DIV avec la compatibilité du navigateur