HTML Formatting in the Quill Editor

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
mkeith121commented, Jul 31, 2020

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?

0reactions
KillerCodeMonkeycommented, Aug 2, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Formats - Quill Rich Text Editor
Inline · Background Color - background · Bold - bold · Color - color · Font - font · Inline Code - code...
Read more >
How to get HTML content from Quill editor? | Lulu's blog
How to get and post raw HTML with Quill rich text editor? This page explains how to get HTML content from the editor...
Read more >
Quill.js getting and setting raw HTML directly in the editor
Learn how to retrieve raw HTML from the Quill editor as well as a few approached to directly inserting HTML into it.
Read more >
Insert formatted content from HTML in Quill editor on load
To retrieve my formatted content from Quill and put it into the database, I call quill.root.innerHTML, and everything goes well. However, I'm ...
Read more >
Quill Playground - Custom hashtag format - CodePen
Adding Classes. In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found