jqueryhtmlhtmlpurifiersummernotenette

Escaped HTML in 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> 

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