羽毛笔错误“羽毛笔无效的羽毛笔容器”

Question

我正在使用 angular 4 和 quill 编辑器。但我得到一个错误quill Invalid Quill container。我更改了容器的名称，但它仍然返回错误并且无法识别容器 ID。我在 ngOninit 中创建了我的羽毛笔对象，但它不起作用！这些是我的代码：

import * as Quill from 'quill';
quill;
this.quill = new Quill('#editor-container', {
    modules: {
        toolbar: { container: '#toolbar-toolbar' }
    },
    theme: 'snow'
});

这是 HTML 文件：

<md-card>
  <div class="toolbar border-none" id="toolbar-toolbar">
    <span class="ql-formats">
      <select class="ql-size">
        <option value="small"></option>
        <option selected=""></option>
        <option value="large"></option>
        <option value="huge"></option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-color"></select>
      <select class="ql-background"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <select class="ql-align">
        <option selected=""></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-link"></button>
    </span>
  </div>
  <hr class="ma-0">
  <div class="border-none capital" id="editor-container" #content>
    <span class="font direct"></span>
  </div>
</md-card>

Answer 1

不幸的是，我不是 Angular 专家，但我在使用 Vue.js 时遇到了完全相同的问题。问题是 Quill 是在 DOM 容器元素正确呈现之前启动的。如果您可以确定（使用稍后的生命周期挂钩或尝试在选项中启动工具栏，而不是在标记中），它应该可以工作。

Answer 2

还有其他人正在研究这个问题，就我而言，移动逻辑来ngOnInit解决问题。或者只是在尝试初始化 quill 时进行检查以呈现 dom 元素。