web-dev-qa-db-fra.com

HTML - New Line char in DIV contenteditable?

Je stocke du contenu dans la base de données, par exemple:

Hello
This
is 
Text

et quand je passe ça à une zone de texte, ça reste avec les nouveaux sauts de ligne. Mais si je passe ce texte à un div avec un contenu modifiable, il restera comme ceci:

Hello This is Text

Comment puis-je résoudre ce problème?

csshtml5htmlcontenteditable
40
Afonso Luis

Définissez un style sur la div: white-space: pre ou white-space: pre-wrap

Exemple: http://jsfiddle.net/fPv6S/

109
Explosion Pills

Pour ajouter des informations sur @ Explosion Pills réponse correcte et extraire des informations de MDN :

Le CSS white-space l'attribut est là pour vous aider:

pré: 

white-space: pre

Les séquences d'espaces blancs sont conservées. Les lignes sont interrompues uniquement au niveau des caractères de nouvelle ligne dans la source et à <br> éléments.

Cela peut entraîner des barres de défilement horizontales indésirables, comme indiqué dans l'exemple!

pré-emballage: 

white-space: pre-wrap

Les séquences d'espaces blancs sont conservées. Les lignes sont coupées au niveau des caractères de nouvelle ligne, à <br>, et si nécessaire pour remplir les zones de ligne.

Comme @ ceremcem a souligné que les sauts de ligne à la fin de la boîte ne seront pas transférés lorsque le texte est copié-collé, ce qui est logique car ces sauts de ligne ne font pas partie de la mise en forme du texte mais plutôt de l'apparence visuelle.

pré-ligne: 

white-space: pre-line

Les séquences d'espaces blancs sont réduites . Les lignes sont coupées au niveau des caractères de nouvelle ligne, à <br>, et si nécessaire pour remplir les zones de ligne.

div{
  border: 1px solid #000;
    width:200px;
}
.pre {
    white-space: pre;
}
.pre-wrap{
   white-space: pre-wrap;
}
.pre-line{
   white-space: pre-line;
}

.inline-block{
    display:inline-block
}
<h2>
pre
</h2>
<div class="pre" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
pre-wrap
</h2>
<div class="pre-wrap" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
pre-line
</h2>
<div class="pre-line"  contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
Chrome FIX
</h2>
<div class="pre-line inline-block"  contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

EDIT 14/08/2018:

Dans Chrome vous pourriez rencontrer des problèmes: appuyez sur Enter va générer un nouveau <div> dans votre contenteditable. Pour éviter cela, vous pouvez soit appuyer sur Shift+Enter ou définissez display: inline au contenu éditable <div> comme on le voit au violon.

4
Sebbas

Essaye ça......

var patt2 = new RegExp("<div>","g");
var patt3= new RegExp("</div>","g");
var patt4= new RegExp("<br>","g");
var z=x.replace(patt2,"\n").replace(patt3,"").replace(patt4,"");

Ça va le faire ...

2
Subham Debnath

Vous pouvez rechercher et remplacer les sauts de ligne par <br />. http://jsfiddle.net/fPv6S/1/

2
andi