Angular中的Quill Editor（editor.root.innerHTML）

Question

使用Quill Editor时遇到问题。我想在另一个HTML标记中显示Quill编辑器的插入内容。

我尝试使用以下代码：

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-class添加到我的div-container：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;
  }
});