在 summernote 中转义 HTML

Question

我正在使用名为 summernote 的所见即所得，我将其值发送到服务器，在那里我用 HTML 净化器净化它。之后我将它保存到数据库 (mysql)。然后我需要在所见即所得中显示纯化的 html，因此将其写为文本区域值（文本区域在 js 中与 summernote 链接）。但它显示转义 html 而不是格式化文本。编辑器运行正常，js控制台没有报错

Javascript 我用来初始化 summernote

      $('.summernote').summernote({
      lang: 'cs-CZ',
      height: 100,
      airMode: true,
      prettifyHtml: true
  });

这是控制台检查其值的所见即所得屏幕截图（在空中模式下，因此未显示工具）。

所见即所得的 Latte 模板：

 <textarea name="{$key}" class="summernote form-control" >{$value->value|noescape}</textarea>

Answer 1

最新的 Summernote（截至此答案时为 v0.7）有一些变化，如果您习惯于使用以前的版本（或在 Internet 上阅读为以前版本编写的资源，其中大部分他们是。）

你不应该再将 textarea 用于 summernote。它应该是 div。但是您不能使用 post 格式提交 div，因为您需要使用 id/name 和 html [=] 格式的 hidden textarea 属性绑定到 summernote 事件。 init 和 blur.

这是一个例子：

服务器端

这是ASP.NET Razor sytax，我相信你能弄清楚什么是什么

<textarea id="@Html.IdFor(p=>p.Content)" name="@Html.IdFor(p=>p.Content)" hidden class="someDummyClassName"></textarea>
<div class="form-control summernote">@Html.Raw(Model.Content)</div>

客户端

$(document).ready(function () {
    $('.summernote').on('summernote.init', function () {
        $('textarea.someDummyClassName').html($('.summernote').summernote("code"))
    }).on("summernote.blur", function () {
        $('textarea.someDummyClassName').html($('.summernote').summernote("code"))
    }).summernote({
        height: 280,
        // YOUR OPTIONS GOES HERE
            ....
        });
});

Answer 2

我今天遇到了类似的事情所以我这样解决了：

$('.summernote', elmnOfContext).summernote({
    lang: 'pl-PL',
    toolbar: [
        ['edit', ['undo', 'redo']]
        //...    
    ],
    callbacks: {
        onInit: function() {
            //The trick:
            var textarea = $(this);
            textarea.val(textarea.summernote("code"));
        }
    }
});

自此解决方案以来，即使用户没有进行任何更改，也可以正确转义被视为textarea 值的源。就在 summernote 编辑器启动的时候。

在 summernote 中转义 HTML

Escaped HTML in summernote

html

jquery

htmlpurifier

summernote

nette