Html – Escaped HTML in summernote

html, htmlpurifier, jquery, nette, summernote

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.

enter image description here

Latte template of the wysiwyg:

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

Best Solution

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