reactjs - 如何在 React-quill 中显示字符计数器

Question

我想在我的 React Quill 上添加一个字符计数器。目前我有一个 950 的字符限制器。问题是用户必须知道字符数不能超过 950，因此我尝试getLength()在渲染上添加字符计数器但给了我一个错误。这是我的代码：

attachQuillRefs = () => {
    if (typeof this.reactQuillRef.getEditor !== "function") return;
    this.quillRef = this.reactQuillRef.getEditor();
  };

  //Handles changes to description field
  handleDetailChange(value) {
    var limit = 950;
    var quill = this.quillRef;
    quill.on("text-change", function (delta, old, source) {
      if (quill.getLength() > limit) {
        quill.deleteText(limit, quill.getLength());
      }
    });
    this.setState({
      detail: value,
    });
  }

在渲染：

<ReactQuill
     ref={(el) => {
        this.reactQuillRef = el;
     }}
     onChange={this.handleDetailChange}
        value={this.state.detail || ""}
     >
     <p>{this.reactQuillRef.getLength() + "/950"}</p>
</ReactQuill>

Answer 1

1）创建一个自定义模块并将其注册到 qill，如下所示。

    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().trim();
      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);

2) 然后将以下代码添加到模块中，如图所示。

counter: {
    container: '#counter',
    unit: 'character'
  }

3) 现在您可以在带有计数器 id 的 quilleditor 标签下添加一个新的 div 标签。

<ReactQuill
     ref={(el) => {
        this.reactQuillRef = el;
     }}
     onChange={this.handleDetailChange}
        value={this.state.detail || ""}
     >
     <p>{this.reactQuillRef.getLength() + "/950"}</p>
</ReactQuill>
<div id="counter">0</div>

Answer 2

react-quill 事件处理程序公开 4 个参数，如下所示：
onChange(content, delta, source, editor)
第 4 个参数editor是对“非特权”编辑器的引用，该编辑器公开了 Quill API 的受限子集。
提供的方法之一是以getLength()字符返回内容长度。
https://github.com/zenomaro/react-quill#the-unprivileged-editor

这解决了长度计算。
从限制开始，您可以显示的不是输入的字符数，而是 950 减去所述数字，在超出限制时变为红色的元素中（剩余少于零个字符）。