如何在羽毛笔编辑器中设置字符限制

Question

我在 angular 2 中使用 Quill Editor，并希望限制用户输入最多 1000 个字符。

Answer 1

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

来自这个github 问题的示例代码

const limit = 1000;

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

目前尚不清楚您使用的是纯quill还是ngx-quill 之类的东西，因此我无法提供完整的示例。如果您需要更多帮助以将其集成到 angular 中，请提供更多详细信息。

记住要quill.off(...)为您的文本更改处理程序打开ngOnDestroy以防止泄漏。

编辑

使用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());
    }
  }
}

编辑器模板

编辑器模板.html

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

Answer 2

这是使用ngx-quill的示例。

执行此操作的一种方法是将 maxLength 设置为所需的数字并向用户显示错误。此外，该操作可以被阻止，直到用户修复它为止。

看图片：

在这里，我添加了 minLength 和 maxLength 属性。它将在编辑器下方显示一条消息并禁用操作按钮。仅当满足验证时，该按钮才会被激活。

请参阅此处的代码：

    <quill-editor [style]="{height: '200px'}" name="notes" 
      [(ngModel)]="note" [minLength]="10" [maxLength]="400" 
       #noteInput="ngModel"></quill-editor>

    <span class="hints" *ngIf="!noteInput.valid">
      Min 10 characters and note more than 400</span>

   <button fxFlexAlign="end" mat-raised-button color="primary" 
     class="btn--rounded" (click)="addNote()" 
     [disabled]="!ticketNoteInput.valid">Add</button>