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

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

Java

nop-entropy

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

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

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

kernel

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

349

200

pytorch

Ascend Extension for PyTorch

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

Summernote 教程

1. 项目介绍

2. 项目快速启动

安装依赖

使用npm

CDN引入

初始化编辑器

3. 应用案例和最佳实践

4. 典型生态项目

热门内容推荐

最新内容推荐

项目优选

Summernote 教程

1. 项目介绍

2. 项目快速启动

安装依赖

使用npm

CDN引入

初始化编辑器

3. 应用案例和最佳实践

4. 典型生态项目

相关内容推荐

热门内容推荐

最新内容推荐

项目优选