【亲测免费】 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开发者文档

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

Java

leetcode

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

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

RuoYi-Vue3

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

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

基于golang开发的网关。具有各种插件，可以自行扩展，即插即用。此外，它可以快速帮助企业管理API服务，提高API服务的稳定性和安全性。

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

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

项目介绍

主要编程语言

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

关键技术

框架

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

准备工作

详细安装步骤

步骤 1: 引入必要的库

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

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

步骤 4: 初始化 Summernote

完成

参考链接

热门内容推荐

最新内容推荐

项目优选

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

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

项目介绍

主要编程语言

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

关键技术

框架

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

准备工作

详细安装步骤

步骤 1: 引入必要的库

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

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

步骤 4: 初始化 Summernote

完成

参考链接

相关内容推荐

热门内容推荐

最新内容推荐

项目优选