menu

Questions & Answers

QuillJS merges subsequent p tags into one with Angular 7 + ngx-quill

I just integrated quilljs into my app. The one problem that I am facing right now some weird behavior with p tags.

as an example, in my component I am setting up reactive form:

this.fullDocumentFormGroup = new FormGroup({
        fullDocument: new FormControl('<p>some</p><p>html</p>', [Validators.required])
      });

And in the template:

<form [formGroup]="fullDocumentFormGroup" class="full-document">

  <quill-editor placeholder="Detailed documentation of your invention here..."
                [style]="{'min-height': '250px'}"
                bounds="self"
                formControlName="fullDocument"
                [readOnly]="isProjectLocked()">
  </quill-editor>

</form>

This code eventually sets the content of the editor as:

<p>somehtml</p>

I tested it with textarea, to check if the reactive form is stripping it out, and it is not.

Tried adding an attribute to quill-editor [sanitize]="true" => nothing changes.

What am I missing?

ANOTHER THOUGHT

Possibly, it strips all the tags and simply wraps the content with p tags. However, if I add another '
' between the paragraphs, it stays formatted properly.

Comments:
2023-01-17 18:42:09
Anyone? Any idea?
2023-01-17 18:42:09
This seems to only be an issue with the reactive forms approach, I am working around it using ngModel.
2023-01-17 18:42:10
@Ryan yep, having the same problem with PrimeNG's editor which uses Quill, it works only with ngModel and not formControl in my project but I can't seem to reproduce it in an empty project.
Answers(4) :

For the newer version of Nebular UI (>7.0), use lazyLoad (camel case)

<nb-tabset>
  <nb-tab lazyLoad>
    <quill-editor
       ...
    ></quill-editor>
  </nb-tab>
</nb-tabset>

I recently encountered this problem, which was mostly apparent when the quill editor is rendered within tabs or steppers. The solution I've used is to use *ngIf to display the quill editor only when it is in view (An alternative is to trigger it on afterViewInit if what I've done doesn't exactly fit your project)

i.e. in my instance, I am using mat-tabs to show different views. I'm getting the tab index with:

<mat-tab-group [selectedIndex]="tabIndex" (selectedIndexChange)="changeIndex($event)">

ts:

changeIndex(index) {
this.tabIndex = index;
}

And then on the component, set it to display only when the tabIndex is '1'

<ngx-quill *ngIf="tabIndex==1"> </ngx-quill>
Comments:
2023-01-17 18:42:10
Thank you! This has been bugging me for hours. My quill editor was in a tab and I had no idea why other solution didn't work.

I fixed this behavior by using hack with use of setTimeout:

In HTML:

<quill-editor formControlName="fullDocument"></quill-editor>

When you're setting this field in typescript wrap patchValue using setTimeout:

setTimeout(function () {
    formGroup.patchValue({fullDocument: fullDocumentHtml});
});

I've even tried changing line separator from <p> to <div> in Quill config, but it didn't help at all :).

I had this same problem with Nebular UI, using NbTabsetComponent and ngx-quill and i solved with lazyload prop in nb-tab component.I think this same solution (use lazyload) work to another tabset component.

<nb-tabset>
  <nb-tab lazyload>
    <quill-editor
      [modules]="editor_modules"
      [(ngModel)]="content"
    ></quill-editor>
  </nb-tab>
</nb-tabset>
Comments:
2023-01-17 18:42:10
You really saved my day, thank you! I'm also encountered this issue in ngx-admin (which uses Nebular UI) while placing the editor instances inside some tabs.
2023-01-17 18:42:10
Thanks for comment man. I also losed a lot of time with this problem.