HTML Formatting in the Quill Editor

Hi there,

I’m using the quill editor as a form input. I’m using the editor as follows:

<form [formGroup]="procedureForm">
  <quill-editor format="html" formControlName="procedureText"></quill-editor>
</form>

And I’m displaying the persisted data utilizing the following:

<quill-editor
  [ngModel]="controlText"
  [readOnly]="true"
  [modules]="{ toolbar: false }"
></quill-editor>

When I save the data from the editor and view it in the editor that omits a toolbar, everything looks correct. But when I go to edit the data in the editor (with toolbar), all the HTML formatting is lost. From what I see, the string that’s being passed in the formControlName is correctly formatted, but the most basic example of <ul><li>1</li></ul> is losing the bullet.

Any help here would be greatly appreciated, and if there’s a way I could provide real-time info, I’d be happy to do so.

[mkeith121]

Specifically, I am using the quill-editor for both creating new Rich Text content and for editing existing rich text content. What I found when using the reactive forms approach, the formControlName was sanitizing the HTML. I ended up having to pass it to the quill-editor via ngModel and explicitly disabling the sanitizer. this.sanitizer.bypassSecurityTrustHtml.

I don’t think this is necessarily an issue with the repo, but I definitely could have used a bit more documentation about sanitization. I’m curious what you think @KillerCodeMonkey . Or perhaps you’ve not run into this issue?

[KillerCodeMonkey]

So in my demo repo:

https://github.com/KillerCodeMonkey/ngx-quill-example/blob/master/src/app/reactive-forms/reactive-forms.component.ts

i just add html strings as default content without bypassing sanitization. And you see the result: https://killercodemonkey.github.io/ngx-quill-example/ (search for reactive form) nothing is stripped