Quill adds empty lines after 1 empty line, ngx-quill


"ngx-quill": "^7.3.9",
I add one empty line between paragraphs
enter image description here

And after saving it becomes:
enter image description here

Project is on Angular 2+
I tried:

    ::ng-deep .ngx-quill-editor
    p > br
      display: none
      margin-bottom: 1rem

But this doesn’t allow make 2 paragraps without vertical space between it

Also I tried to solve it with js

private removeExcessEmptyLine() {
    const quillContainer = this.elemRef.nativeElement.querySelector('.ngx-quill-editor .ql-editor');
    if (quillContainer) {
      const paragraphs = quillContainer.querySelectorAll('p');
      if (paragraphs) {
        paragraphs.forEach((p, index, pArr) => {
          if (p && p.innerHTML === '<br>') {
            if (pArr[index + 1] && pArr[index + 1].innerHTML === '<br>') {
              pArr[index + 1].style.display = 'none';

  ngAfterViewChecked() {

But it generates hundreds of


with style display:none, bad perfomance

Also I tried
ngx-quill-editor(formControlName="text", [modules]="config", [preserveWhitespace]="true")
but [preserveWhitespace]="true" doesn’t work too.

I don’t know, what to do. Please, help

Source: Angular Questions

Categorized as angular, javascript, ngx-quill, quill Tagged , , ,


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us