同时兼容了Web端和移动端的富文本编辑器,样式也非常美好,比较推荐。
浏览器兼容性
由Jason Chen和Byron Milligan创建,并由Slab积极维护。
部署方法
<!-- 加载Quill.js样式 -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
<!-- Quill.js富文本工具栏 -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- Quill.js富文本 -->
<div id="editor">
<p>Hello World!</p>
</div>
<!-- 加载Quill.js -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
// 实例化
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow',
});
</script>
NPM 部署
npm install quill
相关链接
Github地址:https://github.com/quilljs/quill/
官方网站:https://quilljs.com/
官方文档:https://quilljs.com/docs/quickstart/
看云中文文档:http://doc.quilljs.cn/1409423/
相关CDN
<!-- 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>