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> 

Rondarondeau

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

Happy

For anyone using Rails, here is the fix that worked for me: github.com/summernote/summernote-rails/issues/… – Typist

Answer 2

Something similar has happened to me today so I resolved it in this way:

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

Since this solution the source which is regarded as the value of textarea is escaped correctly even without any change by user. Simply while summernote editor starts.

Alamein