ASP.NET WebForms中Summernote加runat='server'工具栏消失问题求助

在ASP.NET WebForms页面中引入Summernote富文本编辑器后，为textarea标签添加runat="server"属性以实现后台代码读写编辑器内容，却出现编辑器工具栏消失、仅显示普通文本框的问题。已正确引入Summernote、jQuery及Bootstrap的CSS和JS文件，相关代码如下：

已引入的资源代码 #

Summernote资源 #

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

母版页中的jQuery/Bootstrap资源 #

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

Summernote相关HTML及JS代码 #

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

效果对比 #

• 未添加runat="server"：正常显示Summernote编辑器及工具栏
• 添加runat="server"：仅显示普通文本框，工具栏消失

问题核心原因：当textarea添加runat="server"后，ASP.NET会在页面渲染时修改元素ID（生成带容器前缀的ClientID），而JS代码仍使用原始ID#summernote初始化Summernote，导致找不到目标元素，编辑器无法正常渲染。

提供两种解决方法：

方法一：使用ClientID获取渲染后的真实ID #

修改JS初始化代码，通过ASP.NET的ClientID属性获取页面渲染后的实际元素ID：

<script>
    $(document).ready(function () {
        $('#<%= summernote.ClientID %>').summernote({
            placeholder: 'Hello Bootstrap 4',
            height: 300,
            toolbar: [
                ['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>

方法二：设置ClientIDMode为Static #

在textarea标签中添加ClientIDMode="Static"，强制ASP.NET保留原始ID，不做修改：

<textarea id="summernote" name="summernote" runat="server" ClientIDMode="Static" style="width:650px; height:550px;"></textarea>

此方式下，原JS初始化代码无需修改即可正常工作。

后台读写内容的正确方式 #

两种方法都能保证编辑器正常渲染，后台代码可通过summernote.Value属性读写内容：

// 读取编辑器内容
string editorContent = summernote.Value;

// 设置编辑器初始化内容
summernote.Value = "<p>这里是富文本初始化内容</p>";

内容的提问来源于stack exchange，提问作者sconners