Quill Editor in Angular (editor.root.innerHTML) - html

Question

I have a problem using the Quill Editor. I want to show the inserted content of the Quill editor in another HTML Tag.
I tried to use the following code:
configureQuill() {
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
[{ 'align': [] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
['image', 'formula']
];
const options = {
modules: {
toolbar: toolbarOptions,
formula : true,
imageResize: {}
},
placeholder: 'Hier goes the content...',
theme: 'snow'
};
this.q = new Quill('#editor2', options);
this.q.on('editor-change', (eventName, ...args) => {
if (eventName === 'text-change') {
this.contentHtml = this.q.root.innerHTML;
}
});
}
And I am using the contentHTML variable to put the HTML content into a div Container:
<div [innerHTML]="contentHtml">
The content is shown but I think the css styles are not used for the content in the div container:
Everything works fine except the formula, the text-alignment and the text size.

Answer 1

I have solved the problem by adding the following css-class to my div-container: ql-editor.
Furthermore I changed the way of pasting the HTML content as follows:
this.q.on('editor-change', (eventName, ...args) => {
if (eventName === 'text-change') {
const justHtmlContent = document.getElementById('contentHtml');
this.contentHtml = this.q.root.innerHTML;
justHtmlContent.innerHTML = this.contentHtml;
}
});