Summernote 教程

2026-01-16 09:31:06作者：郜逊炳

本文将为您提供关于Summernote这款超简单WYSIWYG编辑器的介绍、快速启动指南、应用案例和最佳实践，以及它的典型生态系统项目。

1. 项目介绍

Summernote是一款轻量级且功能强大的JavaScript库，用于在线创建所见即所得（WYSIWYG）的文本编辑器。它以简洁的用户界面和易于集成的特点而受到开发者欢迎。这个编辑器支持多种富文本操作，如字体样式、列表、图片和链接插入等。

2. 项目快速启动

安装依赖

在您的项目中，可以通过npm或直接引入CDN来添加Summernote依赖：

使用npm

npm install --save summernote

CDN引入

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@latest/dist/summernote-bs5.min.css" rel="stylesheet">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/summernote@latest/dist/summernote-bs5.min.js"></script>

初始化编辑器

在HTML文件中选择一个元素作为编辑区域，并在文档加载完成后初始化Summernote：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 引入CSS -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@latest/dist/summernote-bs5.min.css" rel="stylesheet">
</head>
<body>
    <!-- 编辑区 -->
    <div id="summernote">Hello Summernote</div>

    <!-- 引入JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@latest/dist/summernote-bs5.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#summernote').summernote();
        });
    </script>
</body>
</html>

3. 应用案例和最佳实践

自定义工具栏：您可以根据需求定制编辑器的工具栏按钮。

$('#summernote').summernote({
    toolbar: [
        ['style', ['bold', 'italic', 'underline']],
        ['font', ['strikethrough']],
        ['para', ['ul', 'ol']]
    ]
});

事件处理：监听用户交互并执行相应操作。

$('#summernote').on('summernote.change', function(we, contents, $editable) {
    console.log("Content changed:", contents);
});

安全模式：确保用户输入的数据在服务器端过滤和消毒，防止XSS攻击。

4. 典型生态项目

django-summernote：一个Django应用程序，使得在Django项目中轻松集成Summernote成为可能。
react-summernote：React组件版本的Summernote，适合React开发环境。
django-summernote-ajax：另一个Django插件，提供了异步编辑体验。

更多相关项目可在GitHub上搜索关键词“awesome-summernote”找到丰富的资源和模块。

总结，Summernote是一个灵活的富文本编辑器，可以轻松适应各种Web应用程序的需求，同时也提供了一个活跃的社区，不断更新和扩展其功能。通过本教程，您应该已经掌握了如何快速搭建和使用Summernote的基础。祝您编码愉快！

summernote

Super Simple WYSIWYG Editor

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

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

kernel

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

本项目是CANN提供的transformer类大模型算子库，实现网络在NPU上加速计算。

Ascend Extension for PyTorch

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

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

本仓库是 Flutter SDK 与 Flutter Engine 的 OpenHarmony 适配版本，由 CPF-Flutter 团队维护。开发者可使用熟悉的 Flutter 技术栈开发 OpenHarmony 应用，3.35.7 及以后的适配版本可基于本仓库源码构建支持 OpenHarmony 的 Flutter Engine。

JiuwenSwarm 是一款基于openJiuwen开发的智能AI Agent，它能够将大语言模型的强大能力，通过你日常使用的各类通讯应用，直接延伸至你的指尖。

Python

2.25 K

677