quill错误'quill无效的Quill容器‘

Question

我使用的是angular 4和羽毛笔编辑器。但是我得到了一个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

不幸的是，我不是一个角度专家，但我在Vue.js上遇到了完全相同的问题。问题是Quill是在DOM容器元素被正确呈现之前启动的。如果你能确保它(使用以后的生命周期钩子或者尝试在选项中而不是在标记中启动工具栏)，它应该可以工作。

Answer 2

在呈现DOM容器之前调用了Quill。您可以使用setTimeOut延迟构造羽毛笔

var editorId = "some-id-name"
setTimeout( () =>
{
    var container = document.getElementById(editorId);
    var editor    = new Quill( container );
}, 3000 );   
// 3000 millisec is maybe too long but too make sure that the problem is from creating 
// Quill before DOM

Answer 3

还有其他人在研究这个问题，在我的例子中，将逻辑转移到ngOnInit解决了问题。或者在尝试初始化quill以呈现dom元素时进行检查。