How can i set character limit in quill editor

ngx quill max length
quill set content
react-quill character limit
react-quill max length
quill editor height
quill editor validation
quill resize editor
quill js images

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

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>

Setting length for quill editor · Issue #78 · KillerCodeMonkey/ng-quill , to set text-limit for the editor. For example if there is any sceneraio which allow users to enter only 2000 or 4000 charcters limit or word limit  $('.character-count').text((characterLimit - quill.getLength()) + " Characters Remaining"); You can put this right under the quill.on of the above method and it will work. I spent way too much time on this so I hope it helps someone! Edit: Just set your characterLimit variable to whatever you want your limit to be +1. Mine is 801 and it's a perfect 800 character limit counting down to zero.

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

how to control the maximum length of the html · Issue #688 · quilljs , You can put this right under the quill.on of the above method and it will work. I spent way too much time on this so I hope it helps someone! Edit:  The text has to disappear before the height can be extended and the editor automatically scrolled to the bottom. I would prefer the bottom border of the editor to never go deeper than 20px from the bottom limit of the window. I'm not sure where in Quill the handling is for the autogrow, but I have looked for a while now.

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>

How can i set character limit in quill editor - angular - html, I am using Quill Editor in angular 2, and want to limit the user to enter maximum 1000 char. There is as far as I know no built in configuration for that. You can  this will be the total height of the editor + toolbar. and through the default ql-editor css class, the editor has a height of 100% so simply set the height per css or property binding [style]="{height: '250px'}" only if you need set this value dynamically. there is no need to change something at the ngx-quill source code?

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

API, If the user's selection length is 0, i.e. it is a cursor, the format will be set active, so the next character the user types will have that formatting. Source may be "user"  Have exactly the same issue in the same environment (using Quill with PrimeNG). The last new line character is removed. I need to compare the old and new value within the Quill editor to warn the user that he has unsaved changes. This is causing an issue as seems the last new line character is automatically removed.

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:

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>

Configuration, To configure Quill, pass in an options object: var options = { debug: 'info', modules: { toolbar: '#toolbar' }, placeholder: 'Compose an epic', readOnly: true  It does work to set height: 100% manually after the editor has initialized. An afterInit event would probably do the trick to add the css using JS would do the trick. Is there any

ngx-quill-max-html-length, An angular (>= v2) component for the easy use of the QuillJS richt text editor. Install. npm i ngx-quill-max-html-length  Building a Custom Module. Quill’s core strength as an editor is its rich API and powerful customization capabilities. As you implement functionality on top of Quill’s API, it may be convenient to organize this as a module.

ngx-quill-with-max-html-length 4.6.11 on npm, strict - default: true, sets editor in strict mode; scrollingContainer - default '.ql-​editor', allows to set scrolling container; use custom-options for  By pressing use item or long pressing screen anywhere‌ while holding a book and quill in their hand, the player can open a text editor GUI. Using this GUI, the player can write a single book up to 100 pages‌ or 50‌ long, with up to 255 characters per page, with line breaks counting as two characters.

Can't restrict length like maxLength attribute in the <p:textEditor , Can't restrict length like maxLength attribute in the <p:textEditor> component Make sure your widgetVar is set in the example below its editor1. from the GitHub ticket now that you have seen how to get to the Quill Editor. Quill is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture and expressive API. Quill is a free, open source rich text editor built for the modern web.

Comments
  • I am using angular 2 module for quill
  • @NirajBharti See my latest edit for an implementation with ngx-quill
  • 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?