Я использую Quill Editor в angular 2 и хочу, чтобы пользователь мог вводить не более 1000 символов.
Как я могу установить ограничение на количество символов в редакторе quill?
Ответы (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>
Вот пример использования 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>
Существуют встроенные конфигурации для поддержки проверок минимальной и максимальной длины. Однако он не добавляет класс «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>
Исправлено это в Angular 7, добавив приведенный ниже код.
@ViewChild('editor') editor: Editor;
setTimeout(() => {
this.editor.writeValue(data);
this.editor.quill.setSelection(null, data.length, null);
}, 100);
Также для 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);
}
}