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

登录后查看全文

项目优选

收起

Ascend Extension for PyTorch

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

434

395

ops-math

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

C++

1.01 K

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

华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。

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

Vue

1.68 K

989

Summernote 教程

1. 项目介绍

2. 项目快速启动

安装依赖

使用npm

CDN引入

初始化编辑器

3. 应用案例和最佳实践

4. 典型生态项目

热门内容推荐

最新内容推荐

项目优选

Summernote 教程

1. 项目介绍

2. 项目快速启动

安装依赖

使用npm

CDN引入

初始化编辑器

3. 应用案例和最佳实践

4. 典型生态项目

相关内容推荐

热门内容推荐

最新内容推荐

项目优选