在VueJS中渲染换行符 [英] Rendering newline character in VueJS

问题描述

我正在创建一个便笺应用程序，用户可以在其中通过在文本区域中输入多行文本来添加便笺.当我在Firebase中保存便笺时，便笺将以换行(\ n)字符保存，这些字符我想可视化.

I'm creating a note app where users can add a note by entering multiline text in a textarea. When I save the note in Firebase it is being saved with newline (\n) characters which I want to visualize.

因此，我编写了一个过滤器，将这些字符替换为< br/> ，并且效果很好.
不过，现在我需要使用 {{{note.content}}} 渲染数据，并且用户可以注入将要执行的HTML，CSS和JS.
我应该使用 DOMPurify 之类的内容来验证内容，还是可以安全地呈现换行符?>

Therefore, I wrote a filter that replaces these characters with <br /> and that works great.
Though, now I need to render my data using {{{note.content}}} and a user can inject HTML, CSS, and JS that will be executed.
Should I use something like DOMPurify to validate the content or is there a way to safely render newline characters?

推荐答案

将内容包装在 pre 元素中.

< pre> 元素将 pre 在其中保留空白，例如:

Wrap the content in a pre element.

A <pre> element will preserve whitespace within it, eg:

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

将导致:

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

You can see the newline after me!
Woohoo!

这样，您不需要对换行符进行任何过滤.

This way, you do not need to do any filtering of newlines.

这篇关于在VueJS中渲染换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！