How to set Summernote text from ASP.Net Webforms codebehind

76 Views Asked by At

I have included Summernote into an ASP.NET Webforms page, but when I try to set the text for it from codebehind the html text appears but the toolbar disappears.

This is what Summernote looks like before setting the text...default Summernote look

This is how it looks when a try to set the text...setting the text

This is my includes for Summernote and Bootstrap...

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/summernote-lite.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/summernote-lite.min.js"></script>

My Summernote html and javascript is...

<p>
    <asp:Label ID="lblBody" runat="server" Text="Body" class="myLargeFont"></asp:Label>
    <textarea ClientIdMode="Static" id="summernote" name="summernote" runat="server" style="width:650px; height:550px;"></textarea>
    <asp:ListBox ID="lstAttachments" runat="server" Visible="false" Height="200px" Width="150px"></asp:ListBox>
    <asp:Button ID="btnShowAttachment" runat="server" Text="Load" Visible="false" />
</p>

<script>
    $(document).ready(function () {
        $('#summernote').summernote({
            placeholder: 'Hello Bootstrap 4',
            //tabsize: 2,
            height: 300,
            toolbar: [
                // [groupName, [list of button]]
                ['fontname', ['fontname']],
                ['fontsize', ['fontsize']],
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['codeview']]
            ]
        });
    });
</script>

The code for the button to set the text is...

<p>
    <asp:Button ID="btnAddEmail" runat="server" Text="Add email" class="myLargeFont" OnClick="btnAddEmail_Click" />
</p>

private static string summernoteTextTest()
{
    string testText = "<p>This is some text for testing in summernote.</p><p>How does it look?</p>";
    return testText;
}

protected void btnAddEmail_Click(object sender, EventArgs e)
{
    string testtext = summernoteTextTest();
    summernote.InnerText = testtext;
}
0

There are 0 best solutions below