Quill Rich Text Editor 
Quill 是一个现代的富文本编辑器 ,具有兼容性和可扩展性,由 Byron Milligan 和 Byron Milligan 创建并由 Salesforce.com 开源。
查看 Quill Github 页面 开始或者直接跳到 demo
快速开始
将一个 CSS 样式选择器添加到 div 上实例化一个新的 Quill 对象,就可以将该 div变成一个编辑器。
<!-- 创建工具按钮的容器 -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- 创建编辑器的容器 -->
<div id="editor">
<div>Hello World!</div>
</div>
<!-- 引入 Quill 库 -->
<script src="http://cdn.quilljs.com/latest/quill.js"></script>
<!-- 初始化 Quill 编辑器 -->
<script>
var editor = new Quill('#editor');
editor.addModule('toolbar', { container: '#toolbar' });
</script>
下载 Quill
有许多方式下载最新版本的 Quill:
- npm:
npm install quill
- bower:
bower install quill
- tar: https://github.com/quilljs/quill/releases
CDN
<link rel="stylesheet" href="//cdn.quilljs.com/0.19.10/quill.snow.css" />
<script src="//cdn.quilljs.com/0.19.10/quill.min.js"></script>
配置
Quill 允许多种方式来定制以满足你的需求。
容器
Quill 需要一个添加编辑器的容器,你可以传一个 CSS 选择器或者一个 DOM 对象 。
var editor = new Quill('.editor'); // 第一个选择到的元素将被使用
var container = document.getElementById('editor');
var editor = new Quill(container);
var container = $('.editor').get(0);
var editor = new Quill(container);
选项
要配置 Quill,你需要传入一个选项对象:
var configs = {
readOnly: true,
theme: 'snow'
};
var editor = new Quill('#editor', configs);
以下是选项列表:
formats
Quill 目前支持多种格式(即工具条上的功能集)
var editor = new Quill('#editor', {
formats: ['bold', 'italic', 'color']
});
以下是支持的格式
- Bold - 加粗
- Italic - 斜体
- Strikethrough - 删除线
- Underline - 下划线
- Font - 字体
- Size - 文本大小
- Color - 文本颜色
- Background Color - 背景颜色
- Image - 图片
- Link - 链接
- Bullet - 无序列表
- List - 有序列表
- Text Alignment - 文本对齐
modules
Modules 允许 Quill 的行为和功能是可定制的,要启用一个模块,只需简单地在初始化的时候将其添加到编辑器中。
var editor = new Quill('#editor', {
modules: { toolbar: options }
});
或者你可以稍后添加
editor.addModule('toolbar', options);
下面是一些常见的官方支持的模块
自定义模块
你也可以创建你自己的模块。只需要用 Quill.registerModule 注册,该模块就会被传递到对应的 Quill 编辑器和选项。你可以查看 创建一个自定义模块 指南。
Quill.registerModule('armorer', function(quill, options) {
switch(options.hero) {
case 'aragorn':
console.log('anduril');
break;
case 'bilbo':
case 'frodo':
console.log('sting');
break;
case 'eomer':
console.log('guthwine');
break;
case 'gandalf':
console.log('glamdring');
break;
default:
console.log('stick');
}
});
var quill = new Quill('#editor');
quill.addModule('armorer', {
hero: 'sam'
});
pollInterval
默认值: 100
编辑器检测本地变化的时间间隔(毫秒)。注意,某些动作或 API 会触发立即检查。
readOnly
默认值: false
是否以只读模式实例化编辑器。
styles
默认值: {}
该对象包含了要添加到 Quill 编辑器的 CSS 样式。
例子
var editor = new Quill('#editor', {
styles: {
'.ql-editor': {
'font-family': "'Arial', san-serif"
},
'.ql-editor a': {
'text-decoration': 'none'
}
}
});
theme
要使用的主题名,注意,主题指定样式仍然需要手动引入。查看 主题 获取更多信息。
主题
主题允许你轻易地让你的 Quill 编辑器变得好看。
要使用一个自定义的主题,只需要将它的样式文件添加到 <head>
中:
<link rel="stylesheet" href="//cdn.quilljs.com/0.20.0/quill.snow.css" />
然后在初始化中指定它的用途:
var editor = new Quill('#editor', {
theme: 'snow'
});
目前 Quill 只有一个内置的主题 snow
本地开发
Quill 的源码是用 Coffeescript 写的,用 Browserify 来组织文件。
安装
npm install -g grunt-cli
npm install
构建
grunt dist - compile and browserify
grunt server - starts a local server that will build and serve assets on the fly
例子
启动本地服务器 (grunt server
) 后你可以试验一些小的例子:
Quill 的 releases 包中也包含了这些例子的静态文件,无需启动本地服务器能查看。
测试
grunt test:unit - runs javascript test suite with Chrome
grunt test:e2e - runs end to end tests with Webdriver + Chrome
grunt test:coverage - run tests measuring coverage with Chrome
测试是由 Karma 和 Protractor 使用 Jasmine 运行的。查看 Gruntfile.coffee
和 config/grunt/
获取更多的测试参数。
贡献
社区
获取帮助或保持更新。
- Follow @quilljs on Twitter
- 在 Stack Overflow 提问(打上
quill
标签) - 如果需要一个私人的通道,你可以发送邮件到
support@quilljs.com
许可
BSD 3-clause
评论(2)