ngx-quill: HTML is not being rendered when using [(ngModel)] in Chrome

When I attempt to set the initial content for the editor with HTML, it replaces my HTML with a <p> tag and then my content, igoring the HTML elements I entered into the [(ngModel)]. This is happening in Chrome version 62, and I’m using Angular 4, ngx-quill 1.6.0.

HTML:

<quill-editor #wysiwyg [(ngModel)]="wysiwygContent"></quill-editor>

Typescript:

export class ClinicNoteComponent implements OnInit {
	wysiwygContent = '<ul><li>I am example content</li><li><u>Yo</u></li></ul>';
}

Result:

<p>I am example content<u>Yo</u></p>

Thanks for any guidance.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 17 (6 by maintainers)

Most upvoted comments

<quill-editor [(ngModel)]=“wysiwygContent” name=“wysiwygContent” id=“wysiwygContent”></quill-editor>

@bMil21 try this It’s works for me.

Correct. My issue was a result of having the Quill Editor inside of an Angular Material tab, which was “flattening” it as <p></p> for some reason. I simply had to wait for the tab to be active/visible, before setting the [(ngModel)] for the editor.