Summernote工具栏功能失效求助：版本兼容及配置排查

你的问题主要来自三个方面：语法错误、版本不匹配、重复依赖引入，逐一解决就能恢复功能：

1. 修复初始化代码的语法错误 #

你的toolbar配置数组里多个元素末尾缺少逗号，导致JS解析失败，这是工具栏功能失效的直接原因。比如['fontname', ['fontname']]、['table',['table']]后面都没加逗号，JS无法正确识别数组结构。

修正后的toolbar配置：

toolbar: [
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontname', ['fontname']],  // 补上逗号
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['table',['table']],  // 补上逗号
    ['para', ['ul', 'ol', 'paragraph']],
    ['insert', ['link', 'picture', 'table']],
    ['height', ['height']]
],

2. 统一Summernote版本，解决Bootstrap兼容问题 #

你通过NuGet安装了Summernote 1.0.3，但CDN引入的是0.9.0，版本不一致会引发功能异常。另外，Summernote 0.9.0仅支持Bootstrap 3/4，和你用的Bootstrap 5完全不兼容，这是核心矛盾。

修正方案：

• 移除CDN的0.9.0资源，改用和NuGet一致的1.0.3版本，同时引入Bootstrap 5的适配插件：

<!-- 替换为Summernote 1.0.3 + Bootstrap 5适配版 -->
<link href="https://cdn.jsdelivr.net/npm/summernote@1.0.3/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@1.0.3/dist/summernote-bs5.min.js"></script>

3. 移除重复的Bootstrap依赖 #

你同时引入了本地bootstrap.min.css和CDN的Bootstrap 5.3.0-alpha1，两套样式冲突会导致字号选择、表格插入的弹窗无法正常渲染。只保留其中一套即可，推荐用稳定的CDN版本：

<!-- 只保留一套Bootstrap资源 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

4. 确保依赖加载顺序正确 #

资源引入顺序必须严格遵循：

1. jQuery
2. Bootstrap CSS
3. Summernote CSS
4. Bootstrap JS
5. Summernote JS（Bootstrap 5适配版）

修正后的完整代码示例 #

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

<!-- Summernote 1.0.3 + Bootstrap 5适配 -->
<link href="https://cdn.jsdelivr.net/npm/summernote@1.0.3/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@1.0.3/dist/summernote-bs5.min.js"></script>

<script>
$(document).ready(function() {
    $('#summernote').summernote({
        fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '48', '64'],
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['table',['table']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link', 'picture']],  // 移除重复的table按钮
            ['height', ['height']]
        ],
        height:195,
    });

    var df = document.getElementById("disable");
    if(df.value == 'True')
    {
        $('#summernote').summernote('disable');
    }
});
</script>

按照以上步骤调整后，工具栏的表格插入、字号选择等功能即可正常工作。

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