Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

1.8K
Views
¿Cómo puedo establecer el límite de caracteres en el editor Quill?

Estoy usando Quill Editor en angular 2 y quiero limitar al usuario para que ingrese un máximo de 1000 caracteres.

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Hasta donde yo sé, no hay una configuración integrada para eso. Sin embargo, puede eliminar la entrada que exceda una cierta longitud.

Código de ejemplo de este problema de github

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

No está claro si está usando quill puro o algo como ngx-quill, por lo que no puedo proporcionar un ejemplo completo. Proporcione más detalles si desea ayuda adicional para integrarlo en angular.

Recuerde quill.off(...) para su controlador de cambio de texto en ngOnDestroy para evitar fugas.

Editar

Solución agregada usando el módulo ngx-quill .

Componente editor

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

Plantilla de edición

editor.template.html

 <quill-editor (onContentChanged)="textChanged($event)"></quill-editor>
over 4 years ago · Santiago Trujillo Report

0

Aquí hay un ejemplo usando ngx-quill .

Un enfoque para hacer esto sería establecer maxLength en el número deseado y mostrar un error al usuario. Además, la acción se puede bloquear hasta que el usuario la solucione.

Ver imagen:

ingrese la descripción de la imagen aquí

Aquí, he agregado las propiedades minLength y maxLength. Mostrará un mensaje debajo del editor y deshabilitará el botón de acción. Solo cuando se cumpla la validación, el botón se activará.

Ver código aquí:

 <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>
over 4 years ago · Santiago Trujillo Report

0

Hay configuraciones integradas para admitir validaciones de longitud mínima y longitud máxima. Sin embargo, no agrega la clase 'errors.minlength'. Solo agregará la clase 'ng-invalid'.

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

 <span *ngIf="!topicDesc.valid" class="requiredField"> Topic Description is required </span>
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!