html - Angular 中的 Quill 编辑器 (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 容器中的内容：

除了公式、文本对齐方式和文本大小外，一切正常。

标签： htmlcssangularquill

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