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

[bMil21]

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.

[KillerCodeMonkey]

on init i do the following:

const contents = this.quillEditor.clipboard.convert(this.content);
this.quillEditor.setContents(contents);

The first part converts the content to something quill understands, and is "valid" for quill.

There is a possibility (i used before) to force to put html into the editor. but this could lead to misbehaviour or malfunction of quill itself.

And i wanted to be as near as possible at the quill source implementation. there content is also inserted with 1. convert 2. setContents.

And for me your example is working - checkout the "Editor without toolbar + required and ngModule" editor:
https://killercodemonkey.github.io/ngx-quill-example/

ngModel + your html string on init it is working with latest ngx-quill (used in the example repo), and also with Angular 4 and ngx-quill 1.6.0 on my local machine.

[bMil21]

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.

[suryadana]

I use [(ngModel)] not change if my data after changed. Example like this
ngOnInit() { this.modelEditor = ""; } change() { this.modelEditor = "Testing"; }

The content not changed on the editor.

[KillerCodeMonkey]

Did You checked the example repo? There are examples with ngModel. Do You
Get any error im the JS console? Did You import FormsModule to Your App?

I Komang Suryadana [e-mail] schrieb am Mi., 3. Okt. 2018,
06:03:

I use [(ngModel)] not change if my data after changed. Example like this
ngOnInit() { this.modelEditor = ""; } change() { this.modelEditor =
"Testing"; }

The content not changed on the editor.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/77#issuecomment-426504939,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYLtMb0q6fgazOgYY7faIzLlD8WAbks5uhDcggaJpZM4QZ1TJ
.

[RaveenPromodya]

I am also getting the same issue when trying to render the html into the editor.

HTML

<quill-editor theme='snow' scrollingContainer="html, body" placeholder="Add content here..." [(ngModel)]="articleContent" (onEditorCreated)="editorCreated($event)"></quill-editor>

TYPESCRIPT

ngOnInIt() {
     this.articleContent = `<p>Hello world</p>`;
}

I want the Hello World to be rendered in the editor the moment the application starts. Can someone please look into this. Any help is highly appreciated

[suryadana]

I am also getting the same issue when trying to render the html into the editor.

HTML

<quill-editor theme='snow' scrollingContainer="html, body" placeholder="Add content here..." [(ngModel)]="articleContent" (onEditorCreated)="editorCreated($event)"></quill-editor>

TYPESCRIPT

ngOnInIt() {
     this.articleContent = `<p>Hello world</p>`;
}

I want the Hello World to be rendered in the editor the moment the application starts. Can someone please look into this. Any help is highly appreciated

I solved with this trick.

(onEditorCreated)="editorContentCreated($event)"

.....

private editor: any;

ngOnInit(){
       this.editor.setContents(this.editor.clipboard.convert(`<p>Hello world</p>`));
}

editorContentCreated(quiill){
        this.editor = quill;
}

Maybe you can implement this for solving your problem.
Also, you can get update content from the editor with this (onContentChanged)="modelCampaign.content = $event.html".

[KillerCodeMonkey]

this should not be necessary. which ngx-quill version do you use?

you can set the input format through an option to html.
Is there any message in the javascript console?

or can you share a demo repository?

Checkout my example repos, there i am using ngx-quill and ngModel

[nhatzbulawan]

@KillerCodeMonkey,

I am also having some issue with this. When I tried to implement the quill editor inside an Angular Material Tab.

I am using "ngx-quill": "^3.6.0",

[fayas668]

@bMil21 try this It's works for me.

[LOMFM]

Hi I got same issue.
The

tag of the HTML content ( model ) is auto removed in the Quill editor inside the Matertial Tab.
I have fixed this with following trick.

You can get the tab index when the tab that contains the quill editor is activated .
At that time, you can print the quill editor like following.

ex:)

So It works well in my side again.

[KillerCodeMonkey]

Thanks for Sharing your solution!

LOMFM [e-mail] schrieb am Di., 25. Feb. 2020, 12:20:

Hi I got same issue.
The

tag of the HTML content ( model ) is auto removed in the Quill editor
inside the Matertial Tab.
I have fixed this with following trick.

You can get the tab index when the tab that contains the quill editor is
activated .
At that time, you can print the quill editor like following.

ex:)

So It works well in my side again.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/77?email_source=notifications&email_token=AARI4YF37NLVXKAZREPFXFLRET5HZA5CNFSM4EDHKTE2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEM3SW3A#issuecomment-590818156,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AARI4YHVSL7CLS37FFY7RN3RET5HZANCNFSM4EDHKTEQ
.

[vbobroff-app]

FormControlName='...' is work, but ([ngModel]) not work. Matertial magic or other sorcery, IT'S NOT WORK. Remove ngModel from documentation or fix the bug.

[KillerCodeMonkey]

why fixing bugs or removing it from the documentation when it is working for me and in the demo repo?

https://github.com/KillerCodeMonkey/ngx-quill-example/blob/f60296ca4ac5c8bbbc2b4f04f150a24d21b38e84/src/app/model-validation/model-validation.component.html

https://killercodemonkey.github.io/ngx-quill-example/
"NgModel/FormControl + Validation" example.

and since there is no hint that i especially support material, i will not remove it... like i said... because it is working in general.

[vbobroff-app]

'it is working for me and in the demo repo' - it's o'key. But somthing like this

(onEditorCreated)="editorContentCreated($event)"

.....

private editor: any;

ngOnInit(){
       this.editor.setContents(this.editor.clipboard.convert(`<p>Hello world</p>`));
}

editorContentCreated(quiill){
        this.editor = quill;
}

or

• not the best solution, do you agree?

[KillerCodeMonkey]

since i am not using those workarounds and it is working for me ;-). as you can see in the demo repo code... there are no workarounds for it.

and this is more a problem between quilljs and the projections material ui is using for tabs and modals.
My components are just plain plain angular components and not material ui optimized... it is as it is.

An example implementation in the material context can be found in the demo repo as well:
https://github.com/KillerCodeMonkey/ngx-quill-example/tree/f60296ca4ac5c8bbbc2b4f04f150a24d21b38e84/src/app/mat-quill

So i will not implement any workarounds or fixes because somebody is using an ui framework where something is not working.

In some cases there is a limitation between QuillJS and angular, because quilljs is using native JS and DOM API.
E.g. the problems with projections in angular are related to that.

[ruchit07]

If you are using template driven form and [(ngModel)] is not working then check FormsModule is imported in the module where you have imported QuillModule.

If you are using reactive form then check ReactiveFormsModule is imported.