How to use Summernote with ASP.net C# webforms

Question

I have included Summernote into an ASP.NET Webforms page, but when I apply runat="server", the toolbar disappears. In fact the Summernote just appears as a textbox.

I'm using runat="server" so that I can reference it in the code behind to set/get the inner text. Not sure if that's the right, or wrong way to go about it?

I have included the js and css links/lines...

<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>

The following jquery/bootstrap lines are in the masterpage...

<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">

And this is my html and javascript for Summernote...

    <p>
        <asp:Label ID="lblBody" runat="server" Text="Body" class="myLargeFont"></asp:Label>
        <textarea 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>

In the following screenshot, links are the outcome when setting runat="server", and without runat="server"...

Without runat=server result

With runat=server result