Rendre le caractère newline dans VueJS
je crée une application de note où les utilisateurs peuvent ajouter une note en entrant du texte multiligne dans une textarea. Lorsque je sauvegarde la note dans Firebase, elle est sauvegardée avec les caractères newline (n) que je veux visualiser.
Donc, j'ai écrit un filtre qui remplace ces caractères <br /> et qui fonctionne très bien.
Cependant, maintenant je dois rendre mes données en utilisant {{{note.content}}} et un utilisateur peut injecter HTML, CSS, et JS qui seront exécutés.
Dois-je utiliser quelque chose comme DOMPurify pour valider le contenu ou y a-t-il un moyen de rendre les caractères newline en toute sécurité?
6 réponses
enveloppez le contenu dans un pre élément.
<pre> élément préremplir les espaces blancs à l'intérieur, 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>
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.
comme @shelvacu a dit le <pre> balise html préserve des espaces.
cependant son utilisation présente un inconvénient sérieux: l'étiquette elle-même hérite beaucoup de style inutile des cadres CSS qui sont utilisés dans le projet (par exemple Bootstrap).
Pour préserver les espaces et éviter d'hériter de tous les styles d'utilisation:
<span style="white-space: pre;">Some whitespaced content</span>
qu'est-ce qui agira exactement comme le <pre> balise.
Être conscient que white-space: pre reste du texte", comme c'est' - si vous souhaitez avoir plus de saut de ligne quand il est nécessaire d'utiliser: white-space: pre-wrap.
Après avoir décrit en fait mon problème j'ai eu l'idée d'utiliser le pré-balise de texte préformaté. Cette balise respectera les caractères '\t\n ' et rendra le texte correctement sorti de la boîte! Bien que les phrases ne se cassent pas automatiquement et débordent la largeur. Avec certains CSS, j'ai pu avoir le même comportement que les autres éléments.
html:
{{note.content}}
css:
.note pre {
white-space: pre-wrap;
word-wrap: break-word;
font-family: inherit;
}
Je ne suis pas sûr que je manque quelque chose ici, mais toutes les autres réponses vous feront avoir un tas d'espaces supplémentaires à partir de l'indentation dans votre code javascript.
heureusement, la propriété CSS 'white-space' a encore une autre valeur qui correspond à ce but précis: 'pre-line':
HTML:
<div v-model="myNote" class="note">
</div>
Vue:
this.myNote = `My first line of text.
My second line of text.`
CSS:
.note {
white-space: pre-line;
}
Résultat:
My first line of text.
My second line of text.
par opposition au résultat avec juste de l'espace blanc: pré:
My first line of text.
My second line of text.
je suis capable de le faire fonctionner avec des backticks (`)
<pre>{{textRenderedAsItIs}}<pre>
data():{
return{
textRenderedAsItIs:`Hello
World`
}
}
Utiliser white-space: pre-line; propriété CSS.
écrire Mozzila Docpre-line valeur:
Séquences de l'espace blanc sont effondrés. Les lignes sont brisées à newline les personnages,
<br>, et si nécessaire pour remplir les cases.