Summernote 常见问题解决方案

2026-01-20 01:17:14作者：邬祺芯Juliet

1. 项目基础介绍和主要编程语言

Summernote 是一个基于 JavaScript 的轻量级 WYSIWYG（所见即所得）编辑器，旨在帮助开发者在网页上快速创建富文本编辑器。它支持 Bootstrap 3、4 和 5，并且提供了丰富的插件和扩展功能。Summernote 的主要编程语言是 JavaScript，依赖于 jQuery 和 Bootstrap 框架。

2. 新手在使用 Summernote 时需要特别注意的 3 个问题及详细解决步骤

问题 1：Summernote 无法正确加载

解决步骤：

检查依赖库：确保在 HTML 文件的 <head> 标签中正确引入了 jQuery 和 Bootstrap 的 CSS 和 JS 文件。

<script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

引入 Summernote 的 CSS 和 JS 文件：确保在依赖库之后引入了 Summernote 的 CSS 和 JS 文件。
```
<link href="summernote-bs5.css" rel="stylesheet">
<script src="summernote-bs5.js"></script>
```
初始化 Summernote：确保在 DOM 加载完成后正确初始化 Summernote。
```
$(document).ready(function() {
    $('#summernote').summernote();
});
```

问题 2：图片无法粘贴或上传

解决步骤：

检查 Summernote 配置：确保 Summernote 的配置中没有禁用图片上传功能。

$('#summernote').summernote({
    callbacks: {
        onImageUpload: function(files) {
            // 自定义图片上传逻辑
            sendFile(files[0]);
        }
    }
});

实现图片上传逻辑：如果需要自定义图片上传逻辑，可以在 onImageUpload 回调中实现。

function sendFile(file) {
    var data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        url: "/your-upload-endpoint",
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {
            $('#summernote').summernote('insertImage', url);
        }
    });
}

问题 3：代码注入风险

解决步骤：

了解风险：Summernote 的代码视图允许用户输入脚本内容，这可能导致代码注入风险。

服务器端过滤和净化：在服务器端对用户输入的 HTML 进行过滤和净化，防止恶意脚本注入。

// 示例：使用 HTMLPurifier 进行净化
require_once 'HTMLPurifier/HTMLPurifier.auto.php';
$config = HTMLPurifier_Config::createDefault();
$purifier = new HTMLPurifier($config);
$clean_html = $purifier->purify($dirty_html);

客户端限制：在客户端对用户输入进行初步检查，限制用户输入的脚本内容。

$('#summernote').summernote({
    codeviewFilter: true,
    codeviewIframeFilter: true
});

通过以上步骤，新手可以更好地理解和解决在使用 Summernote 过程中可能遇到的问题。

summernote

Super simple WYSIWYG editor

项目地址：https://gitcode.com/gh_mirrors/su/summernote

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

leetcode

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

喝着茶写代码！最易用的自托管一站式代码托管平台，包含Git托管，代码审查，团队协作，软件包和CI/CD。

RuoYi-Vue3

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

无需学习 Kubernetes 的容器平台，在 Kubernetes 上构建、部署、组装和管理应用，无需 K8s 专业知识，全流程图形化管理

基于golang开发的网关。具有各种插件，可以自行扩展，即插即用。此外，它可以快速帮助企业管理API服务，提高API服务的稳定性和安全性。