[SOLVED] Get Correct HTML from Summernote form when the content has not been edited

Get Correct HTML from Summernote form when the content has not been edited

I am using this code to display summernote editor on my page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap4</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>
.
.
.
<textarea id="summernote" name="summernote">@Model.InviteEmailBody</textarea>
                <script>
                    $('#summernote').summernote({
                        tabsize: 4,
                        height: 220
                    });
                    $('#summernote').on('summernote.blur', function () {
                        $('#summernote').html($('#summernote').summernote('code'));
                    });

                    $('#summernote').html(escape($('#summernote').summernote('code')));
                </script>

Then saving to database

string str = Request.Form["summernote"];
string htmlEncoded = WebUtility.HtmlEncode(str);
roleToUpdate.InviteEmailBody = htmlEncoded;

Everything is fine when I actually edit the content, but when i don't, the value I fet in str variable has a lot of

%3Cdiv%3EHello%20

I am not sure if the way I implemented summernote is correct or how would I fix this problem.. if anybody can help I would appreciate it

Solution

This garbage is produced by

$('#summernote').html(escape($('#summernote').summernote('code')));

If you want to have your textarea cleaned up (or predifed with some text), you may use the following syntax. The second argument is a string value you want to set:

$('#summernote').summernote('code', '')
$('#summernote').html(escape($('#summernote').summernote('code', '<b>some</b>')));