如何解决.Net 5应用中Summernote富文本编辑器textarea重复显示问题

复现问题对应的原代码 #

你提供的表单和初始化代码如下：

<div class="control-group">
    <div class="form-group floating-label-form-group controls">
         <label asp-for="Message">Message</label>
         <textarea rows="5" class="form-control" asp-for="Message" required data-validation-required-message="Please enter a message."></textarea>
         <p class="help-block text-danger"></p>
    </div>
</div>

@section Scripts{
    <script>
        //Default font size but not for placeholder...
        $('#Message').summernote({
            placeholder: "Please enter a message"
        });
    </script>
}

你使用的静态资源为 summernote-bs4.min.css 与 summernote-bs4.min.js。

问题原因 #

Summernote初始化时会自动隐藏原生textarea元素，额外生成一套自定义编辑器DOM结构。重复显示属于典型的初始化异常或样式冲突，常见触发原因如下：

• 初始化代码执行时DOM还未完全加载，导致Summernote没有成功隐藏原生textarea
• 外层floating-label-form-group浮动标签类的样式规则和Summernote样式冲突，强制让原生textarea重新显示
• 静态资源加载顺序错误，Summernote依赖的jQuery、Bootstrap4资源未提前加载完成，导致初始化失败

修复方案 #

1. 调整初始化代码执行时机，增加DOM加载完成的监听，同时强制隐藏原生textarea兜底：

@section Scripts{
    <script>
        $(document).ready(function(){
            $('#Message').summernote({
                placeholder: "请输入留言内容"
            });
            // 强制隐藏原生textarea，避免样式冲突导致重复显示
            $('#Message').hide();
        });
    </script>
}

2. 若调整后仍有浮动标签错位问题，直接移除外层form-group类中的floating-label-form-group即可，Summernote编辑器本身不支持Bootstrap浮动标签交互逻辑，无需保留该类。
3. 确认静态资源加载顺序严格遵循：jQuery → Bootstrap4 CSS/JS → summernote-bs4.min.css → summernote-bs4.min.js

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