构建自定义模块 — Quill富文本编辑器快速入门中文文档

上一节内容请查看：将Quill添加到项目构建管道中

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

注意：内部模块是指组织了很多Quill相关的功能，你可以通过实现自己的模块并使用相同的名称注册它来覆盖这些默认模块。

一、计算字符

字符计数器的核心是计算编辑器中的字符数量，并在某些UI中显示该值，因而我们需要：

• 使用Quill监听文字变化。
• 计算字数。
• 显示该值。

让我们直接以一个完整的例子开始：

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

    <script>
    // 实现和注册模块
    Quill.register('modules/counter', function(quill, options) {
    var container = document.querySelector('#counter');
    quill.on('text-change', function() {
        var text = quill.getText();
        // 计算字符数有几个问题
        // 但是我们稍后会修正这些
        container.innerText = text.split(/\s+/).length;
    });
    });

    // 我们现在可以这样初始化Quill
    var quill = new Quill('#editor', {
    modules: {
        counter: true
    }
    });
    </script>

这是所有需要添加一个自定义模块到Quill！一个函数可以注册为一个模块，它将与任何选项一起传递相应的Quill编辑器对象。

二、使用options选项

模块被传递一个options对象，该对象可用于微调所需的行为。我们可以使用它来接受计数器容器的选择器，而不是硬编码的字符串。让我们还自定义计数器来计数单词或字符：

Quill.register('modules/counter', function(quill, options) {
    var container = document.querySelector(options.container);
    quill.on('text-change', function() {
      var text = quill.getText();
      if (options.unit === 'word') {
        container.innerText = text.split(/\s+/).length + ' words';
      } else {
        container.innerText = text.length + ' characters';
      }
    });
  });
  
  var quill = new Quill('#editor', {
    modules: {
      counter: {
        container: '#counter',
        unit: 'word'
      }
    }
  });

三、构造器

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

var Counter = function(quill, options) {
    this.quill = quill;
    this.options = options;
    var container = document.querySelector(options.container);
    var _this = this;
    quill.on('text-change', function() {
      var length = _this.calculate();
      container.innerText = length + ' ' + options.unit + 's';
    });
  };
  
  Counter.prototype.calculate = function() {
    var text = this.quill.getText();
    if (this.options.unit === 'word') {
      return text.split(/\s+/).length;
    } else {
      return text.length;
    }
  };
  
  Quill.register('modules/counter', Counter);
  
  var quill = new Quill('#editor', {
    modules: {
      counter: {
        container: '#counter',
        unit: 'word'
      }
    }
  });
  
  var counter = quill.getModule('counter');
  
  // 直接访问calculate()
  console.log(counter.calculate(), 'words');

四、封装所有东西

现在让我们完成ES6中的模块并修复一些烦人的bug。

class Counter {
    constructor(quill, options) {
      this.quill = quill;
      this.options = options;
      this.container = document.querySelector(options.container);
      quill.on('text-change', this.update.bind(this));
      this.update();  // Account for initial contents
    }
  
    calculate() {
      let text = this.quill.getText();
      if (this.options.unit === 'word') {
        text = text.trim();
        // Splitting empty text returns a non-empty array
        return text.length > 0 ? text.split(/\s+/).length : 0;
      } else {
        return text.length;
      }
    }
    
    update() {
      var length = this.calculate();
      var label = this.options.unit;
      if (length !== 1) {
        label += 's';
      }
      this.container.innerText = length + ' ' + label;
    }
  }
  
  Quill.register('modules/counter', Counter);
  
  var quill = new Quill('#editor', {
    modules: {
      counter: {
        container: '#counter',
        unit: 'word'
      }
    }
  });