【问题标题】: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 格式那样显示,它与 &lt;h1&gt;&lt;/h1&gt;&lt;br&gt; 保存的数据一样显示。它仅显示纯文本。

<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 -&lt;div v-html="description"&gt; &lt;/div&gt;

【问题讨论】:

    标签: 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中,你必须这样做,&lt;div v-html="yourdataproperty"&gt; &lt;/div&gt;
    • 完美运行。谢谢你,先生。寻找这个答案这么久:)。
    【解决方案2】:

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

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

    【讨论】:

    • 你可以这样做:&lt;div v-html="description"&gt; &lt;/div&gt;
    猜你喜欢
    • 2014-07-27
    • 1970-01-01
    • 2021-01-14
    • 2021-12-14
    • 2021-10-24
    • 2017-01-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多