Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

1.8K
Visualizações
How can i set character limit in quill editor

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

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

There is as far as I know no built in configuration for that. You can however delete input that exceeds a certain length.

Example code from this github issue

const limit = 1000;

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

It is not clear if you are using pure quill or something like ngx-quill so I cannot provide a full example. Provide more details if you want additional help with integrating it in angular.

Remember to to quill.off(...) for your text-change handler on ngOnDestroy to prevent leaks.

Edit

Solution added using the ngx-quill module.

Editor component

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

editor.template.html

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

0

Here is an example using ngx-quill.

One approach of doing this would be setting the maxLength to the desired number and show an error to the user. In addition, the action can be blocked until the user fixes it.

See Image:

enter image description here

In here, I have added minLength and maxLength properties. It will display a message below the editor and disable the action button. Only when the validation is met, the button will be made active.

See Code Here:


    <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 Relatório

0

There are inbuilt configurations to support minimum length and maximum length validations. However it doesn't add 'errors.minlength' class. It will only add 'ng-invalid' class.

<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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda