Super Simple WYSIWYG Editor

当前项目代码仓暂无内容

自动翻译

Summernote

Summernote 是一个 JavaScript 库，可帮助您创建具有简单易用界面的 WYSIWYG 编辑器。Summernote 采用 MIT 许可证授权，由社区维护。

官网：https://summernote.org

为什么选择 Summernote？

简单易用：提供易于使用、直观的界面
安装便捷：只需在 HTML 中包含 JS/CSS 文件并创建一个 div 标签即可开始使用
与 Bootstrap 兼容：支持 Bootstrap 3、4 和 5
丰富的生态系统：提供大量插件和连接器，增强功能和集成选项
轻松处理图片：图片通过 base64 编码自动嵌入到内容中，无需单独进行图片管理

如何使用

Summernote 基于 jQuery 构建。

安装方法

1. 引入 JS/CSS

在 HTML 的 <head> 标签中包含以下代码：

<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- include summernote css/js-->
<link href="summernote-bs5.css" rel="stylesheet">
<script src="summernote-bs5.js"></script>

2. 放置一个 `div` 标签

在 body 标签中的某处放置一个 div 标签。此元素将被 summernote 编辑器替换。

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

3. 初始化 Summernote

最后，使用以下 JavaScript 初始化 Summernote：

$(document).ready(function() {
  $('#summernote').summernote();
});

如需更多示例，请访问项目网站。

API

Summernote 提供了一系列 API。例如，您可以使用以下代码获取编辑器中文本所对应的 HTML 源代码：

var html = $('#summernote').summernote('code');

关于 API 的更多详细信息，请参考文档。

警告 - 代码注入代码视图允许用户输入脚本内容。请务必在服务器端过滤/净化 HTML。否则，攻击者可能会向客户端注入任意 JavaScript 代码。

贡献指南

有关如何为 Summernote 做出贡献的详细信息，请参见 CONTRIBUTING.md。

贡献者 ✨

感谢以下这些杰出人士：

赞助商

您的公司正在使用 Summernote 吗？请让您的老板支持我们。成为赞助商将帮助我们投入更多时间维护此项目，并使其为所有用户变得更好。此外，您公司的徽标将显示在这里和我们的网站上 😃 [成为赞助商]

支持者

如果您想以个人身份提供资金支持，请考虑成为 Summernote 的支持者。

联系方式

Discord：加入 Summernote Discord 社区

项目介绍

极其简易的“所见即所得”编辑器【此简介由AI生成】

MIT JavaScript 3.72 K提交数javascript summernote bootstrap

定制我的领域

README

Code of conduct

29211.84 K2.25 K访问 GitHub

summernote:基于 jQuery 的 WYSIWYG 编辑器项目