angular - 如何在鹅毛笔编辑器中设置字符限制

Question

I am using Quill Editor in angular 2, and want to limit the user to enter maximum 1000 char.

Answer 1

据我所知，没有内置配置。不过，您可以删除超过特定长度的输入。

示例代码来自this github问题

const limit = 1000;

quill.on('text-change', function (delta, old, source) {
  if (quill.getLength() > limit) {
    quill.deleteText(limit, quill.getLength());
  }
});

尚不清楚您是否使用纯羽毛笔或类似 ngx-quill 的东西所以我无法提供完整的例子。如果您需要有关将其集成到 Angular 中的更多帮助，请提供更多详细信息。

请记住在 ngOnDestroy 上为文本更改处理程序设置 quill.off(...) 以防止泄漏。

编辑

使用 ngx-quill 添加的解决方案模块。

编辑器组件

editor.component.ts

import { Component } from '@angular/core';

const MAX_LENGTH = 10;

@Component({
  selector: 'editor',
  templateUrl: './editor.component.html',
})
export class EditorComponent {
  /*
   * Delete added characters that exceeds max length
   */
  textChanged($event) {
    if ($event.editor.getLength() > MAX_LENGTH) {
      $event.editor.deleteText(MAX_LENGTH, $event.editor.getLength());
    }
  }
}

编辑器模板

editor.template.html

<quill-editor (onContentChanged)="textChanged($event)"></quill-editor>