Ngx-quill: how to get the exact HTML?

[RscAnonymous]

@KillerCodeMonkey I have added [(ngModel)] to my quill editor and able to get everything inserted but when I'm selecting the font size, the html is coming with class ql-size-huge. Of course class ql-size-huge is not understandable by editors other than quill. How do I get the exact HTML for the font size I have used?

[KillerCodeMonkey]

you can subscribe on editor content changes with the ouput:

(onContentChanged)=handleContentChange($event)

$event contains the html- string, text-string and blot-operations object

or you can use ngModel or reactiveForms with formControl to store the latest editor value automatically.

The default format of ngx-quill is html.

checkout my demo repo.
https://killercodemonkey.github.io/ngx-quill-example/

Type something in the mention example editor :). And checkout the other examples, how to use formControls and ngModel

[RscAnonymous]

Am I supposed to convert all the custom quill CSS to inline ones in order to make all the other editors understand it?

[KillerCodeMonkey]

https://quilljs.com/guides/how-to-customize-quill/#class-vs-inline ;)

But you should not store html if you want to use the content in other editors.
You should store the object representation ;).

Because other editors are working in different ways and may not handle some quill related stuff and vise versa.

So store the content in aa non editor dependent form like quill provides with the object representation.
And build converters, for those blot-Objects, if you want to use them with maybe tinyMCE or CKEditor.

If you want to present the quill content, just render a readonly editor without a toolbar.

[Jeya-Prakash]

What if I need my html to be send as a email ? Email doesn't support classes, it requires inline styles to work. Any workaround for this ?

[KillerCodeMonkey]

ehm you checked out my last comment with the link "classes vs inline"?

this is not a ngx-quill issue or question... it has something to do how quilljs works.

This quilljs demo shows that you can use inline and class based styling: https://quilljs.com/playground/#class-vs-inline-style

[Jeya-Prakash]

yea okayy.. will look into it 👍