Quill

一个轻量级、可定制和跨浏览器的富文本编辑器

Quill Rich Text Editor Build Status

Webdriver Test Status

Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and open sourced by Salesforce.com.

To get started, check out the Quill Github Page or jump straight into the demo.

Quickstart

Instantiate a new Quill object with a css selector for the div that should become the editor.

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <div>Hello World!</div>
</div>

<!-- Include the Quill library -->
<script src="http://cdn.quilljs.com/latest/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var editor = new Quill('#editor');
  editor.addModule('toolbar', { container: '#toolbar' });
</script>

Downloading Quill

There are a number of ways to download the latest or versioned copy of Quill.

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>

Local Development

Quill's source is in Coffeescript and utilizes Browserify to organize its files.

Installation

npm install -g grunt-cli
npm install

Building

grunt dist - compile and browserify
grunt server - starts a local server that will build and serve assets on the fly

Examples

With the local server (grunt server) running you can try out some minimal examples on:

Quill releases also contain these examples as built static files you can try without needing to run the local development server.

Testing

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

Tests are run by Karma and Protractor using Jasmine. Check out Gruntfile.coffee and config/grunt/ for more testing options.

Contributing

Community

Get help or stay up to date.

Bug Reports

Search through Github Issues to see if the bug has already been reported. If so, please comment with any additional information about the bug.

For new issues, create a new issue and tag with the appropriate browser tag. Include as much detail as possible such as:

  • Detailed description of faulty behavior
  • Affected platforms
  • Steps for reproduction
  • Failing test case

The more details you provide, the more likely we or someone else will be able to find and fix the bug.

Feature Requests

We welcome feature requests. Please make sure they are within scope of Quill's goals and submit them in Github Issues tagged with the 'feature' tag. The more complete and compelling the request, the more likely it will be implemented. Garnering community support will help as well!

Pull Requests

  1. Please check to make sure your plans fall within Quill's scope (likely through Github Issues).
  2. Fork Quill
  3. Branch off of the 'develop' branch.
  4. Implement your changes.
  5. Submit a Pull Request.

Pull requests will not be accepted without adhering to the following:

  1. Conform to existing coding styles.
  2. New functionality are accompanied by tests.
  3. Serve a single atomic purpose (add one feature or fix one bug)
  4. Introduce only changes that further the PR's singular purpose (ex. do not tweak an unrelated config along with adding your feature).

Important: By issuing a Pull Request you agree to allow the project owners to license your work under the terms of the License.

Thanks

Swift, for providing the npm package name. If you're looking for his blogging engine see v0.1.5-1.

License

BSD 3-clause

Quill Rich Text Editor Build Status

Webdriver Test Status

Quill 是一个现代的富文本编辑器 ,具有兼容性和可扩展性,由 Byron MilliganByron 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:

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

测试是由 KarmaProtractor 使用 Jasmine 运行的。查看 Gruntfile.coffeeconfig/grunt/ 获取更多的测试参数。

贡献

社区

获取帮助或保持更新。

  • Follow @quilljs on Twitter
  • Stack Overflow 提问(打上 quill 标签)
  • 如果需要一个私人的通道,你可以发送邮件到 support@quilljs.com

许可

BSD 3-clause

讨论区