其他
Quill:37k+ stars 一款API驱动的富文本编辑器!非常强大!开源免费!
项目完全免费开源,目前在Github上以获得 37.1k stars 非常受欢迎!
API 驱动的设计 支持 Chrome, Firefox, Safari, and IE 9+
标准化 HTML
通过其模块和富有表现力的 API 完全可定制 快速且轻量级
可以将内容表示为 JSON,更易于处理和转换为其他格式; 提供两个主题以快速轻松地更改编辑器的外观
架构设计
Delta:富文本数据层,负责描述数据
Parchment:富文本控制器层,负责操控 dom,将数据变化映射到 UI 表示
Formats :Quill支持多种格式,包括UI控件和API调用
Module:模块化形式,负责解耦功能项,管控模块加载
npm - npm install quill
<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.0.0/quill.js"></script>
<script src="//cdn.quilljs.com/1.0.0/quill.min.js"></script>
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet" />
<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.0.0/quill.core.css" rel="stylesheet" />
<script src="//cdn.quilljs.com/1.0.0/quill.core.js"></script>
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
官网:https://quilljs.com/
开源地址:https://github.com/quilljs/quill/
开发手册:https://quilljs.com/docs/quickstart/
END
点点关注不迷路
本文发表于公众号【爱编程爱技术】
往期推荐: