Quill Rich Text Editor

Quill 是一个现代的富文本编辑器，具有兼容性和可扩展性，由 Byron Milligan 和 Byron Milligan 创建并由 Salesforce.com 开源。

快速开始

将一个 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

quill