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开发者文档

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

Ascend Extension for PyTorch

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

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

openJiuwen agent-studio提供零码、低码可视化开发和工作流编排，模型、知识库、插件等各资源管理能力