【亲测免费】 Summernote 安装和配置指南

2026-01-20 02:11:32作者：昌雅子Ethen

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

项目介绍

Summernote 是一个基于 JavaScript 的轻量级 WYSIWYG（所见即所得）编辑器，旨在帮助开发者在网页上快速创建富文本编辑器。Summernote 的设计理念是简单易用，同时支持丰富的功能和插件扩展。

主要编程语言

Summernote 主要使用 JavaScript 编写，依赖于 jQuery 和 Bootstrap 框架。

2. 项目使用的关键技术和框架

关键技术

JavaScript: 用于实现编辑器的核心功能。
jQuery: 提供 DOM 操作和事件处理的支持。
Bootstrap: 提供样式和布局的支持，确保编辑器在不同设备上的良好显示。

框架

Bootstrap 3/4/5: Summernote 支持 Bootstrap 3、4 和 5，开发者可以根据项目需求选择合适的版本。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装 Summernote 之前，请确保你的项目已经包含了 jQuery 和 Bootstrap 的依赖。如果没有，请先安装这些依赖。

详细安装步骤

步骤 1: 引入必要的库

首先，在你的 HTML 文件的 <head> 标签中引入 jQuery 和 Bootstrap 的 CSS 和 JS 文件。

<!-- 引入 jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />

<!-- 引入 Bootstrap JS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

步骤 2: 引入 Summernote 的 CSS 和 JS 文件

接下来，引入 Summernote 的 CSS 和 JS 文件。

<!-- 引入 Summernote CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs5.min.css" rel="stylesheet">

<!-- 引入 Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs5.min.js"></script>

步骤 3: 创建 Summernote 编辑器的目标元素

在你的 HTML 文件的 <body> 标签中，创建一个 div 元素，这个元素将被 Summernote 替换为编辑器。

<div id="summernote">Hello Summernote</div>

步骤 4: 初始化 Summernote

最后，在 DOM 加载完成后，初始化 Summernote 编辑器。

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

完成

至此，Summernote 编辑器已经成功安装并配置在你的项目中。你可以根据需要进一步自定义编辑器的功能和样式。

参考链接

summernote

Super simple WYSIWYG editor

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

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

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

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

Java

RuoYi-Vue3

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

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