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.
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>
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>