Angular 中的 Quill 编辑器 (editor.root.innerHTML)答案

【问题标题】：Quill Editor in Angular (editor.root.innerHTML)Angular 中的 Quill 编辑器 (editor.root.innerHTML)
【发布时间】：2018-04-25 16:25:57
【问题描述】：

我在使用 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">

显示了内容，但我认为 div 容器中的内容没有使用 css 样式：

除了公式、文本对齐和文本大小之外，一切都很好。

【问题讨论】：

标签： html css angular quill

【解决方案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;
  }
});

【讨论】：