Редактор Quill в Angular (editor.root.innerHTML)

Question

У меня проблема с использованием Quill Editor.Я хочу показать вставленное содержимое редактора Quill в другом теге HTML.

Я попытался использовать следующий код:

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;
  }
});
}

И я использую переменную contentHTML, чтобы поместить содержимое HTML в контейнер Div:

<div [innerHTML]="contentHtml">

содержимое показывается, но я думаю, что стили CSS не используются для содержимого в контейнере div:

Все отлично работает, кроме формулы, текстаВыравнивание и размер текста.

Answer 1

Я решил проблему, добавив следующий css-класс в мой div-контейнер: ql-editor.

Кроме того, я изменил способ вставки содержимого HTML следующим образом:

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;
  }
});