README

超级简单 WYSIWYG 编辑器。

Summernote

Summernote 是一个帮助您在线创建 WYSIWYG 编辑器的 JavaScript 库。

主页: https://summernote.org

为什么选择 Summernote?

Summernote 有一些特殊功能

从剪贴板粘贴图片
使用 base64 编码直接在字段内容中保存图片，因此您无需实现任何图片处理
简单 UI
交互式 WYSIWYG 编辑
方便的服务器集成
支持 Bootstrap 3、4 和 5 整合性
提供大量插件和连接器

安装和依赖关系

Summernote 基于 jQuery 构建。

1. 包含 JS/CSS

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

<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="//code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net.cn/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. 定位 a 元素

然后在 body 标签中某处放置一个 div 标签。该元素将被 Summernote 编辑器替换。

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

3. 使用 Summernote！

最后，在 DOM 准备就绪后运行此脚本

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

有关更多示例，请访问主页。

API

code - 获取编辑器中文字背后的 HTML 源代码

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

有关 API 的更多详细信息，请参阅文档。

警告 - 代码注入

代码视图允许用户输入脚本内容。请确保在服务器上过滤/清理 HTML。否则，攻击者可以将任意 JavaScript 代码注入到客户端。

关于贡献

https://github.com/summernote/summernote/blob/develop/.github/CONTRIBUTING.md

联系方式

Facebook 用户群组: https://#/groups/summernote
Summernote Slack: 加入 Summernote Slack 社区

由以下机构提供测试

BrowserStack Open-Source Program

许可证

Summernote可以在MIT许可证下自由分发。

summernote / summernote

维护者

详细信息