Quilljs工具栏

时间:2017-08-31 08:50:36

标签: angularjs quill

我有动态创建工具栏的问题。 代码是下一个:



$onChanges (bind) {
    if (bind.selected.currentValue) {
        window.setTimeout(() => {
            this.quill = new Quill(`#editor-${this.component.id}`, {
                theme: 'snow',
                modules: {
                    toolbar: `#toolbar-container-${this.component.id}`
                },
                placeholder: 'Put some text here'
            });
        }, 1);
    } else {
        this.quill = null;
    }
}

<div id="{{'editor-' + vm.component.id}}"></div>

<div ng-show="vm.component" id="{{'toolbar-container-' + vm.component.id}}">
  <span class="ql-formats">
      <select class="ql-font">
          <option selected>Sans Serif</option>
          <option value="inconsolata">Inconsolata</option>
          <option value="roboto">Roboto</option>
          <option value="mirza">Mirza</option>
          <option value="arial">Arial</option>
      </select>
      <select class="ql-size"></select>
  </span>
          <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></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>
  </span>
          <span class="ql-formats">
      <select class="ql-align"></select>
  </span>
          <span class="ql-formats">
      <button class="ql-clean"></button>
  </span>
          <span class="ql-formats">
      <button class="ql-link"></button>
      <button class="ql-image"></button>
      <button class="ql-video"></button>
  </span>
</div>
&#13;
&#13;
&#13;

#editor和#toolbar NODES位于不同的组件中。

我创建了Quill的新实例,专注于组件。

我也可以创建多个编辑器实例并在其他地方使用工具栏。

但是关注编辑器我得到了错误

&#13;
&#13;
Uncaught TypeError: Cannot read property 'innerHTML' of null
    at IconPicker.selectItem (quill.js:9444)
    at new IconPicker (quill.js:9435)
    at eval (quill.js:6569)
    at Array.map (<anonymous>)
    at SnowTheme.buildPickers (quill.js:6564)
    at SnowTheme.extendToolbar (quill.js:9602)
    at SnowTheme.addModule (quill.js:6533)
    at eval (quill.js:5443)
    at Array.forEach (<anonymous>)
    at SnowTheme.init (quill.js:5441)
&#13;
&#13;
&#13;

当我尝试添加新编辑器时,我收到了相同的错误消息。

请告诉我这些信息,我做错了什么? 非常感谢quilljs的帮助。

0 个答案:

没有答案