html - Angular 中的羽毛笔编辑器 (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 类添加到我的 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;
  }
});