如何正确显示 contenteditable 内容？ (laravel) (vue)答案

【问题标题】：How to display contenteditable contents properly? (laravel) (vue)如何正确显示 contenteditable 内容？ (laravel) (vue)
【发布时间】：2020-01-01 18:24:49
【问题描述】：

我已经把下面的#descrition里面的内容保存了。

<div id="description" contenteditable="true"></div>

我的问题是，当我尝试显示它时，它不像 html 格式那样显示，它与 <h1></h1> 和 <br> 保存的数据一样显示。它仅显示纯文本。

<div id="description" contenteditable="true">{{ $description }}</div>

我保存在数据库中的内容并显示：

<h1>Descriptoin</h1> Doner, where I built and maintained banner adverts and microsites. <br> And...

有人知道如何正确显示吗？

答案：感谢@Akram Wahid

在 laravel - {!! $description !!}
在 vue -<div v-html="description"> </div>

【问题讨论】：

标签： laravel vue.js vuejs2 contenteditable laravel-6

【解决方案1】：

你必须这样做，因为 Blade {{ }} 语句是通过 PHP 的 htmlspecialchars 函数自动发送来防止 XSS 攻击的。如果你不希望你的数据被转义，你可以使用以下语法：

<div id="description" contenteditable="true">{!! $description !!}</div>

【讨论】：

答案是正确的。不能接受需要等待 10 分钟。 Bdw 先生，您知道如何在 html/css 解决方案中实现这一点，因为下周我将使用 vue 来解决这个问题：）。我的意思是 vue 不识别{!! !!}
在vue中，你必须这样做，<div v-html="yourdataproperty"> </div>
完美运行。谢谢你，先生。寻找这个答案这么久:)。

【解决方案2】：

默认情况下，Laravel 会转义特殊字符以防止 XSS 攻击。尝试使用这种格式：

<div id="description" contenteditable="true">{!! $description !!}</div>

【讨论】：

你可以这样做：<div v-html="description"> </div>