Quill: how to control the maximum length of the html

[maku]

I would like to know if it possible to control the maximum length of the html code (e.g. set a length property).

[jhchen]

You mean setting the maximum number of characters than can be typed into the Quill? Like <textarea> maxlength property?

[maku]

Yes exactly

[jhchen]

There's no built in configuration. You can check the length with getLength() but I don't have a good recommendation for preventing addition of content when the limit is reached.

[trigun539]

Was able to do this with the following code:

var limit = 10;

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

[StreetStrider]

Hello. Has anyone got a solution for max-lines behavior? I believe it would be more complex than max-length, and would involve counting by newlines in Deltas with the following rejecting anything below max allowed newlines. It would be great if someone faced such problem and solved it.

[franverona]

I think this solution is incomplete. What happens if user tries to add text in the middle? The solution provided by @trigun539 won't be valid because text will be deleted from the end if I'm not mistaken.

[IanOnFire]

Hi everybody, we've found a solution in React that we are content with.

<ReactQuill
    onKeyDown={this.checkCharacterCount}
    onChange={(value) => this.props.onChange(value)}
/>

checkCharacterCount = (event) => {
    if (this.getCharacterText().length > this.props.maxCharacters && event.key !== 'Backspace') {
        event.preventDefault();
    }
}

if the max length of characters is reached, onChange won't be fired.

[StreetStrider]

That's a workaround, not a solution. If it's working for you, it's OK. But the purpose of editor (Quill) is to release you from opting in editable area in such crude manners. Too many parts potentially can be broken. Quill API is required.

[nvlled]

This one works regardless where the text is inserted (doesn't handle formatted pasted content)

const limit = 10; 
quill.on('text-change', function (delta, old, source) {
    if (quill.getLength() <= limit) {
        return;
    }   
    const { ops } = delta;
    let updatedOps;
    if (ops.length === 1) {
        // text is inserted at the beginning
        updatedOps = [{ delete: ops[0].insert.length }]; 
    } else {
        // ops[0] == {retain: numberOfCharsBeforeInsertedText}
        // ops[1] == {insert: "example"}
        updatedOps = [ops[0], { delete: ops[1].insert.length }]; 
    }   
    quill.updateContents({ ops: updatedOps }); 
});

@jhchen It's fine if it's not a _good_ recommendation, at least maybe point us in the right direction. It will save some folks some time hacking around.

[bjgaynor]

If anyone comes across this and wants a character counter, here's one I threw together. All you need is a div with the class ".character-count".

$('.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.

[seanjrankin]

This one works regardless where the text is inserted (doesn't handle formatted pasted content)

const limit = 10; 
quill.on('text-change', function (delta, old, source) {
    if (quill.getLength() <= limit) {
        return;
    }   
    const { ops } = delta;
    let updatedOps;
    if (ops.length === 1) {
        // text is inserted at the beginning
        updatedOps = [{ delete: ops[0].insert.length }]; 
    } else {
        // ops[0] == {retain: numberOfCharsBeforeInsertedText}
        // ops[1] == {insert: "example"}
        updatedOps = [ops[0], { delete: ops[1].insert.length }]; 
    }   
    quill.updateContents({ ops: updatedOps }); 
});

@jhchen It's fine if it's not a _good_ recommendation, at least maybe point us in the right direction. It will save some folks some time hacking around.

I was getting infinite loops with this one if I pasted in large amounts of text.

Here is a simpler solution I came up with:
Just set the contents back to oldContents if the maxLength is exceeded

    (delta, oldContents) => {
      let html = quill.root.innerHTML;
      let length = html.length;

      if (maxLength && maxLength < length) {
        quill.setContents(oldContents);
      } else {
        // ...do other stuff
      }

Note: I am using the innerHTML to determine length, but you could just look at the text length instead if that suits your needs.

[Senelith]

@IanOnFire I tried using your implementation, but its says getCharacterText() is not a function

Having trouble in controlling the maximum character length in react ? Isn't there a solid solution provided by the editor itself without workarounds ?

[flexilivre]

Here's a solution with a module. It works only if you have history module enabled :

Quill.register('modules/maxlength', function(quill, options) {

    quill.on('text-change', function(e) {

            let size = quill.getText();
            if (size.length > options.value)
                quill.history.undo();

    });

});

Then you have to specify your module like that :

var editor = new Quill(container, { modules: 
                                                { 
                                                    maxlength : {value : 10},
                                                    history: { delay: 100, userOnly: true }  
                                                }
                                            });

The lone problem with this solution is when you try to copy and paste. If what you try to copy makes your content longer than the max length, your copy is cancelled. The best would be to allow copying only what fits. It should not be hard to code this behaviour with clipboard module.

[sliceh]

This one works regardless where the text is inserted (doesn't handle formatted pasted content)

const limit = 10; 
quill.on('text-change', function (delta, old, source) {
    if (quill.getLength() <= limit) {
        return;
    }   
    const { ops } = delta;
    let updatedOps;
    if (ops.length === 1) {
        // text is inserted at the beginning
        updatedOps = [{ delete: ops[0].insert.length }]; 
    } else {
        // ops[0] == {retain: numberOfCharsBeforeInsertedText}
        // ops[1] == {insert: "example"}
        updatedOps = [ops[0], { delete: ops[1].insert.length }]; 
    }   
    quill.updateContents({ ops: updatedOps }); 
});

@jhchen It's fine if it's not a _good_ recommendation, at least maybe point us in the right direction. It will save some folks some time hacking around.

I was getting infinite loops with this one if I pasted in large amounts of text.

Here is a simpler solution I came up with:
Just set the contents back to oldContents if the maxLength is exceeded

    (delta, oldContents) => {
      let html = quill.root.innerHTML;
      let length = html.length;

      if (maxLength && maxLength < length) {
        quill.setContents(oldContents);
      } else {
        // ...do other stuff
      }

Note: I am using the innerHTML to determine length, but you could just look at the text length instead if that suits your needs.

How to get the old content in angular 8 - if i am using $event in event emitter