10

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

Niraj Bharti
  • 101
  • 1
  • 1
  • 3

6 Answers6

10

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>
Community
  • 1
  • 1
jgranstrom
  • 576
  • 5
  • 13
  • I am using angular 2 module for quill – Niraj Bharti Mar 16 '17 at 11:25
  • @NirajBharti See my latest edit for an implementation with ngx-quill – jgranstrom Apr 15 '17 at 07:42
  • 4
    Be careful with this solution as only works if user is adding text at the end. What happens if user tries to add text in the middle? – Fran Verona Jul 13 '18 at 13:57
  • And even more, try to see how it works if you wrap entire content with 5-10 tags, try to make whole content bold and then italic when it reached maximum already. Real length will be more than your maximum value. So, this somehow works, but doesn't Instead of cutting content, block your form and show counter as red (if you have one) or additional error message below. – Rantiev Feb 26 '21 at 16:44
5

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>
Adithya Sreyaj
  • 1,710
  • 10
  • 22
3

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>
Rajantha Fernando
  • 308
  • 4
  • 12
2

Fixed it in Angular 7 by adding below code.

@ViewChild('editor') editor: Editor;
  setTimeout(() => {
    this.editor.writeValue(data);
    this.editor.quill.setSelection(null, data.length, null);
  }, 100);
Sathishkumar Raju
  • 21
  • 1
2

instead of using quill.deleteText() method for deleting all the extra text,

you can use quill.formatText() method to make all the unwanted text into color red.

like this >>>

quill.on('text-change', (e) => {
  quill.formatText(100, 5000, {                   
    'color': 'rgb(220, 20, 60)'
  });
});

I hope it can help you.

Suraj
  • 802
  • 9
  • 7
1

Also for ngx-quill, a variant of the jgranstrom's proposal focused on controlling HTML length. A Typescript code, kind of a simple workaround but still usable.

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);
 }
}
janekw
  • 106
  • 1
  • 5