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

docs

OpenHarmony documentation | OpenHarmony开发者文档

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

336

178

ops-math

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

Ascend Extension for PyTorch

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

Java

agent-studio

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

本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。