ASP.NET项目结合TailwindCSS集成Summernote失败，求解决方案

现有问题排查 #

你的代码存在几个关键问题：

• 未加载jQuery依赖：Summernote必须依赖jQuery才能运行
• 静态文件路径无效：ASP.NET默认禁止直接访问node_modules目录，浏览器会返回404
• 初始化语法错误：$('#proposed').summernote缺少括号，无法执行初始化
• Bootstrap依赖冲突：官方默认版Summernote依赖Bootstrap，与TailwindCSS样式冲突

完整集成步骤 #

1. 迁移Summernote静态资源到wwwroot

ASP.NET仅允许访问wwwroot目录下的静态文件，需将Summernote资源复制到该目录：

• 安装Summernote：npm install summernote
• 在package.json添加复制脚本：

"scripts": {
  "copy-summernote": "xcopy node_modules\\summernote\\dist wwwroot\\lib\\summernote /s /y"
}

• 执行脚本完成复制：npm run copy-summernote

可选：使用LibMan工具直接下载Summernote到wwwroot/lib/summernote，无需手动复制

2. 正确加载资源（_Layout.cshtml）

按jQuery → Summernote CSS → Summernote JS的顺序加载，推荐使用无Bootstrap的轻量化版本避免样式冲突：

<head>
    <!-- 加载jQuery（确保已安装到wwwroot/lib/jquery） -->
    <script src="~/lib/jquery/jquery.min.js"></script>
    <!-- 加载无Bootstrap的Summernote样式 -->
    <link href="~/lib/summernote/summernote-lite.css" rel="stylesheet">
    <!-- 加载无Bootstrap的Summernote脚本 -->
    <script src="~/lib/summernote/summernote-lite.js"></script>
</head>

3. 修正初始化代码（Index.cshtml）

修复语法错误，同时配置适配Tailwind的工具栏：

<script>
    $(document).ready(function () {
        $('#proposed').summernote({
            height: 200,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
                ['view', ['codeview']]
            ]
        });
    });
</script>

4. 解决Tailwind样式覆盖问题

在自定义CSS文件中添加规则，恢复Summernote默认样式：

.note-editor,
.note-editor * {
    all: revert;
}

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