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

Published

"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
    p:not(:last-of-type)
      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() {
    this.removeExcessEmptyLine();
  }

But it generates hundreds of

<p><br></p>

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

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

Answers

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
faq