在 VueJS 中渲染换行符

问题描述

我正在创建一个笔记应用程序，用户可以在其中通过在 textarea 中输入多行文本来添加笔记.当我将笔记保存在 Firebase 中时，它会使用我想要可视化的换行符 () 字符进行保存.

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

解决方案

将内容包裹在 pre 元素中.

 元素将pre在其中提供空格，例如:
后面跟着一个换行符，不是你能说的<br/><br/><pre>你可以在我后面看到换行符！哇哦！</pre>
将导致:
后面是换行，不是你能看出来的你可以在我后面看到换行符！呜呼！
这样，您不需要对换行符进行任何过滤.
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 () characters which I want to visualize.    
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?
 解决方案 
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>
Will result in:
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 中渲染换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！