web-dev-qa-db-fra.com

Rendu d'un caractère de nouvelle ligne dans VueJS

Je crée une application de note dans laquelle les utilisateurs peuvent ajouter une note en saisissant du texte multiligne dans une zone de texte. Lorsque je sauvegarde la note dans Firebase, il l’est avec les caractères de nouvelle ligne (\ n) que je souhaite visualiser.

J'ai donc écrit un filtre qui remplace ces caractères par <br /> et ça marche très bien.
Bien, maintenant je dois restituer mes données en utilisant {{{note.content}}} et un utilisateur peut injecter du code HTML, CSS et JS à exécuter.
Devrais-je utiliser quelque chose comme DOMPurify pour valider le contenu ou existe-t-il un moyen de restituer en toute sécurité les caractères de nouvelle ligne?

javascriptvue.js
40
Swimburger

Enveloppez le contenu dans un élément pre.

UNE <pre> L'élément servira pre à servir les espaces en son sein, par exemple:

This is followed by a newline,
not that you can tell
<br />
<br />
<pre>You can see the newline after me!
Woohoo!</pre>

Aura pour résultat:

This is followed by a newline, not that you can tell

You can see the newline after me!
Woohoo!

De cette façon, vous n'avez pas besoin de filtrer les nouvelles lignes.

34
Shelvacu

Comme @shelvacu a déclaré, la balise html <pre> Préserve les espaces .

Cependant, son utilisation présente un inconvénient sérieux: , la balise elle-même hérite de nombreux styles inutiles des frameworks CSS utilisés dans les projets (par exemple, Bootstrap).

Pour préserver les espaces et éviter d'hériter des styles inutiles, utilisez: 

<span style="white-space: pre;">Some whitespaced content</span>

ce qui agira exactement comme la balise <pre>.

Sachez que white-space: pre Reste le texte "tel quel" - si vous souhaitez avoir un saut de ligne supplémentaire lorsque cela est nécessaire, utilisez: white-space: pre-wrap.

Voir: Propriété w3schools.com des espaces blancs CSS

96
Krzysiek

Après avoir décrit mon problème, j'ai eu l'idée d'utiliser le pré-tag qui est destiné au texte préformaté. Cette balise respectera les caractères '\ t\n' et rendra le texte correctement hors de la boîte! Bien que les phrases ne soient pas cassées automatiquement et débordent de la largeur. Avec certains CSS, j'ai pu obtenir le même comportement que d'autres éléments.

html:

{{note.content}}

css:

.note pre {
  white-space: pre-wrap; 
  Word-wrap: break-Word;
  font-family: inherit;
}
26
Swimburger

Utilisation white-space: pre-line; Propriété CSS.

Comme écrit dans Mozzila Doc pour pre-line valeur:

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

7
Shiva127

Je suis capable de le faire fonctionner avec des backticks (`)

<pre>{{textRenderedAsItIs}}<pre>

data():{
  return{
    textRenderedAsItIs:`Hello
                        World`
   }
}
1
Ardhi