Summernote 执行转义 html

Question

我从MySQL数据库中获取数据，存储的数据是这样的：

<p>&lt;script&gt;alert('123');&lt;/script&gt;<br /></p>

当我正常获取数据时，我得到的结果是：

<script>alert('123');</script>

这很好并且按预期工作，但是当我将数据提取到使用 Summernote 初始化的文本区域时，我收到如下警告：

Summernote 以某种方式将转义的 html 标签转换为有效的 HTML。

我该如何解决这个问题？

我已经试过这个问题的答案了：

没用。

Answer 1

为什么不在存储时、在编辑器中或在编辑器外显示时清理数据？通常，在我的 CMS 中，我不允许使用 <script/> 标签来帮助减轻用户添加潜在危险脚本的风险。

也就是说，有一个 PR 正在讨论我们如何才能最好地解决这个问题。 https://github.com/summernote/summernote/pull/3782 如果能提供信息或帮助，我们将不胜感激，或者甚至是另一个 PR 解决了这个问题。

Answer 2

我设法修复了它，而不是像这样通过 jQuery 获取 textarea 中的数据：

<textarea name="description" id="description"></textarea>
<script>
    $('#description').summernote({
        height: 250,
        codeviewFilter: false,
        codeviewIframeFilter: true,
        // toolbar
        toolbar: [
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ],
    }).on("summernote.enter", function(we, e) {
        $(this).summernote('pasteHTML', '<br />&VeryThinSpace;');
        e.preventDefault();
    });
    $("#description").summernote("code", "<?php echo $video->getDetails('', $fileName, 'desc'); ?>");
</script>

现在它不转换 > 和 $lt;到 <> 如果它是 script 标签。

在此处查看更多信息：

https://github.com/summernote/summernote/pull/3782#issuecomment-774432392

Answer 3

使用 javascript 您可以轻松解决此问题。它在 React + Django 项目中对我有用。我还使用了 django_summer_note 并且它也显示了像您这样的数据。然后我得到了那个解决方案：

//只需创建一个这样的函数，它将 return 您的数据（您与 django_summernote 一起使用的数据）。

const createBlog = () => {
    return { __html: blog.description };
  };

// 现在在你的 HTML(JSX) 中像这样显示你的数据。

<div className='' dangerouslySetInnerHTML={createBlog()} />

Summernote 执行转义 html

Summernote executes escaped html

html

jquery

summernote