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