Quill文档（三）：构建自定义模块

Quill作为编辑器的核心优势在于其丰富的API和强大的定制能力。当您在Quill的API之上实现功能时，将其组织为一个模块可能会很方便。为了本指南的目的，我们将逐步介绍一种构建单词计数器模块的方法，这是许多文字处理器中常见的功能。

注意

在内部，模块是Quill的许多功能的组织方式。您可以通过实现自己的模块并使用相同的名称注册来覆盖这些默认模块。

计算单词

---

本质上，单词计数器只是在编辑器中计算单词数量，并在某些UI中显示这个值。因此我们需要：

1. 监听Quill中的文本变化。
2. 计算单词数量。
3. 显示这个值。

让我们直接来看一个完整的例子！

index.html

<link href="/index.css" rel="stylesheet">

<div id="editor"></div>
<div id="counter">0</div>

<script src="/index.js"></script>

index.css

#editor {
  border: 1px solid #ccc;
}

#counter {
  border: 1px solid #ccc;
  border-width: 0px 1px 1px 1px;
  color: #aaa;
  padding: 5px 15px;
  text-align: right;
}

index.js

function Counter(quill, options) {
  const container = document.querySelector('#counter');
  quill.on(Quill.events.TEXT_CHANGE, () => {
    const text = quill.getText();
    // There are a couple issues with counting words
    // this way but we'll fix these later
    container.innerText = text.split(/\s+/).length;
  });
}

Quill.register('modules/counter', Counter);

// We can now initialize Quill with something like this:
const quill = new Quill('#editor', {
  modules: {
    counter: true
  }
});

这正是添加Quill自定义模块所需要的全部内容！一个函数可以注册为Quill模块，并且它将被传递相应的Quill编辑器对象以及任何选项。

使用Options

---

模块会接收一个Options对象，可以用来微调所需的行为。我们可以使用这个Options来接受计数器容器的选择器，而不是硬编码的字符串。让我们还将计数器定制为计算单词或字符：

index.html

<link href="/index.css" rel="stylesheet">

<div id="editor"></div>
<div id="counter">0</div>

<script src="/index.js"></script>

index.css

#editor {
  border: 1px solid #ccc;
}

#counter {
  border: 1px solid #ccc;
  border-width: 0px 1px 1px 1px;
  color: #aaa;
  padding: 5px 15px;
  text-align: right;
}

index.js

function Counter(quill, options) {
  const container = document.querySelector(options.container);
  quill.on(Quill.events.TEXT_CHANGE, () => {
    const text = quill.getText();
    if (options.unit === 'word') {
      container.innerText = text.split(/\s+/).length + ' words';
    } else {
      container.innerText = text.length + ' characters';
    }

  });
}

Quill.register('modules/counter', Counter);

// We can now initialize Quill with something like this:
const quill = new Quill('#editor', {
  modules: {
    counter: {
      container: '#counter',
      unit: 'word'
    }
  }
});

构造函数

---

由于任何函数都可以注册为Quill模块，我们可以将计数器实现为ES5构造函数或ES6类。这使我们能够直接访问和利用模块。

index.html

<link href="/index.css" rel="stylesheet">

<div id="editor"></div>
<div id="counter">0</div>

<script src="/index.js"></script>

index.css

#editor {
  border: 1px solid #ccc;
}

#counter {
  border: 1px solid #ccc;
  border-width: 0px 1px 1px 1px;
  color: #aaa;
  padding: 5px 15px;
  text-align: right;
}

index.js

class Counter {
  constructor(quill, options) {
    const container = document.querySelector(options.container);
    quill.on(Quill.events.TEXT_CHANGE, () => {
      const text = quill.getText();
      if (options.unit === 'word') {
        container.innerText = text.split(/\s+/).length + ' words';
      } else {
        container.innerText = text.length + ' characters';
      }

    });
  }

  calculate() {
    const text = this.quill.getText();

    return this.options.unit === 'word' ?
      text.split(/\s+/).length :
      text.length;
  }
}

Quill.register('modules/counter', Counter);

// We can now initialize Quill with something like this:
const quill = new Quill('#editor', {
  modules: {
    counter: {
      container: '#counter',
      unit: 'word'
    }
  }
});

把它们都整合起来

---

现在让我们用ES6完善这个模块并修复一些小错误。就是这样！

index.html

<link href="/index.css" rel="stylesheet">

<div id="editor"></div>
<div id="counter">0</div>

<script src="/index.js"></script>

index.css

#editor {
  border: 1px solid #ccc;
}

#counter {
  border: 1px solid #ccc;
  border-width: 0px 1px 1px 1px;
  color: #aaa;
  padding: 5px 15px;
  text-align: right;
}

index.js

class Counter {
  constructor(quill, options) {
    this.quill = quill;
    this.options = options;
    this.container = document.querySelector(options.container);
    quill.on(Quill.events.TEXT_CHANGE, this.update.bind(this));
  }

  calculate() {
    const text = this.quill.getText();

    if (this.options.unit === 'word') {
      const trimmed = text.trim();
      // Splitting empty text returns a non-empty array
      return trimmed.length > 0 ? trimmed.split(/\s+/).length : 0;
    } else {
      return text.length;
    }
  }

  update() {
    const length = this.calculate();
    let label = this.options.unit;
    if (length !== 1) {
      label += 's';
    }
    this.container.innerText = `${length} ${label}`;
  }
}

Quill.register('modules/counter', Counter);

// We can now initialize Quill with something like this:
const quill = new Quill('#editor', {
  modules: {
    counter: {
      container: '#counter',
      unit: 'word'
    }
  }
});