Summernote中的转义HTML [英] Escaped HTML in summernote

问题描述

我正在使用称为summernote的所见即所得，将这些值发送到服务器，并在其中使用HTML Purifier对其进行净化.之后，我将其保存到数据库(mysql).然后，我需要在所见即所得中显示纯净的html，因此将其写为textarea值(textarea在js中与summernote链接在一起).但是它显示转义的html而不是格式化的文本.该编辑器正常工作，并且js控制台未显示任何错误.

I am using wysiwyg called summernote which values I send to server, where I purify it with HTML Purifier. After that I save it to the DB (mysql). I then need to show purified html back in the wysiwyg, so write it as a textarea value (the textarea is linked in js with summernote). But it shows escaped html instead of formatted text. The editor works normally and js console shows no errors.

我用来初始化summernote的Java语言

Javascript I use to init summernote

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

这是所见即所得的屏幕截图(处于空中模式，因此未显示工具)，控制台正在检查其值.

This is screenshot of wysiwyg (in air mode so tools are not shown) with console inspecting its value.

所见即所得的拿铁模板:

Latte template of the wysiwyg:

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

推荐答案

最新的Summernote(截至本回答之时为v0.7)进行了更改，如果您习惯使用以前的版本(或阅读资源)，可能会导致问题.在Internet上为以前的版本写的，其中大多数都是.)

Latest Summernote (v0.7 as of time of this answer) has changes which might cause problem if you are used to work with a previous version (or reading resources on the Internet written for a previous version, which most of them are.)

您不应该再将 textarea 用于summernote.它应该是 div .但是您不能在表单发布中提交div，因为您需要使用 hidden textarea ，并将其正确的表单id/name和html属性绑定到summernote事件. init 和 blur .

You shouldn't use textarea for summernote anymore. It should be a div. But you can't submit a div with your form post, for that you need to use a hidden textarea with its proper form id/name and html property bound to summernote events. init and blur.

这里是一个例子:

服务器端

这是ASP.NET Razor语法，我确定您可以弄清楚什么是

This is ASP.NET Razor sytax, I'm sure you can figure out what is what

<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
            ....
        });
});

这篇关于Summernote中的转义HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！