Как я могу установить ограничение на количество символов в редакторе quill?

Я использую Quill Editor в angular 2 и хочу, чтобы пользователь мог вводить не более 1000 символов.


person Niraj Bharti    schedule 15.03.2017    source источник


Ответы (5)


Насколько я знаю, встроенной конфигурации для этого нет. Однако вы можете удалить ввод, длина которого превышает определенную.

Пример кода из этой проблемы github

const limit = 1000;

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

Неясно, используете ли вы чистое перо или что-то вроде 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());
    }
  }
}

Шаблон редактора

editor.template.html

<quill-editor (onContentChanged)="textChanged($event)"></quill-editor>
person jgranstrom    schedule 15.03.2017
comment
Я использую угловой модуль 2 для пера - person Niraj Bharti; 16.03.2017
comment
@NirajBharti Посмотрите мою последнюю правку для реализации с ngx-quill. - person jgranstrom; 15.04.2017
comment
Будьте осторожны с этим решением, так как оно работает только в том случае, если пользователь добавляет текст в конце. Что произойдет, если пользователь попытается добавить текст посередине? - person Fran Verona; 13.07.2018
comment
И даже больше, попробуйте посмотреть, как это работает, если вы оберните весь контент 5-10 тегами, попробуйте сделать весь контент жирным, а затем курсивом, когда он уже достиг максимума. Реальная длина будет больше вашего максимального значения. Итак, это как-то работает, но не вместо того, чтобы вырезать содержимое, заблокировать форму и показать счетчик красным (если он у вас есть) или дополнительное сообщение об ошибке ниже. - person Rantiev; 26.02.2021

Вот пример использования 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>

person Adithya Sreyaj    schedule 30.04.2019

Существуют встроенные конфигурации для поддержки проверок минимальной и максимальной длины. Однако он не добавляет класс «errors.minlength». Он добавит только класс «ng-invalid».

<quill-editor [(ngModel)]="topic.description" [bounds]="'self'"  [minLength]="'5'"   #topicDesc="ngModel">

<span *ngIf="!topicDesc.valid" class="requiredField">
                Topic Description is required
</span>
person Rajantha Fernando    schedule 09.06.2018

Исправлено это в Angular 7, добавив приведенный ниже код.

@ViewChild('editor') editor: Editor;
  setTimeout(() => {
    this.editor.writeValue(data);
    this.editor.quill.setSelection(null, data.length, null);
  }, 100);
person Sathishkumar Raju    schedule 13.05.2019

Также для ngx-quill вариант предложения jgranstrom ориентирован на контроль длины HTML. Код машинописного текста, своего рода простой обходной путь, но все еще пригодный для использования.

onContentChanged(context: ChangeContext) {

 console.log('Content changed: ', context);
 if (context == null || context.html == null) { return; }

 // A HTML - focused version of https://stackoverflow.com/questions/42803413/how-can-i-set-character-limit-in-quill-editor
 // It does cause an error log in the console: 'The given range isn't in document.'
 // Still it's a simple and effective solution.
 if (context.html.length > RESOURCE_TEXT_MAX_LENGTH) {
   let oldDelta = context['oldDelta'];
   if (oldDelta == null) { return; }
   context.editor.setContents(oldDelta.ops);
 }
}
person janekw    schedule 19.09.2017