Escaped HTML in summernote

Question

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.

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> 

Answer 1

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

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.

Here is an example:

Server Side

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>

Client Side

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