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

atomcode

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

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

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

Ascend Extension for PyTorch

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

413

339

cherry-studio

🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端

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

Java

Summernote 常见问题解决方案

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

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

问题 1：Summernote 无法正确加载

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

问题 3：代码注入风险

热门内容推荐

最新内容推荐

项目优选

Summernote 常见问题解决方案

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

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

问题 1：Summernote 无法正确加载

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

问题 3：代码注入风险

相关内容推荐

热门内容推荐

最新内容推荐

项目优选