请问一个页面如何使用多个vue-quill-editor？

[wxytongxue]

一个页面引入多个组件报Cannot read property 'innerHTML' of null错误

[surmon-china]

贴下代码和错误

[wxytongxue]

@surmon-china 错误代码如上 代码仿照examples里写的，只不过向上封装了好几层，形成一个组件，在一个页面里引用好几次这个组件

[surmon-china]

@wxytongxue 贴代码

[elive777]

@surmon-china 我也遇到这个问题，但这个似乎跟 toolbar 那栏有关，如果我把 toolbar 里内容都清空，则不会报错，如下： 但如果开启 工具栏，则会 报一样的错： VUE页面里，我是这样使用的：

在这个组件里，工具栏那部分：

[surmon-china]

因为你如果使用字符串形式的选择器来定义 toolbar，Quill 内部回去寻找此 ID 的 DOM 元素，所以，如果你一个页面有多个编辑器又恰巧使用 <div id="toolbar" slot="toolbar">，你可以给不同的工具栏设置不同的 ID 值，用于避开 DOM 重复的问题。

[ZGahou]

nuxt这种写法的话没有去定义到toolbar，请问有解决办法吗

[surmon-china]

@ZGahou 指令不适合嵌套 dom，所以从一开始就没有设计，你可以在 Nuxt.js 中 使用 <no-ssr>来包装编辑器组件，但是这种形式下编辑器标签本身就不会 SSR 输出了，但是也没啥影响，因为但凡涉及编辑器的都是动态内容，动态内容都是不需要 SEO 的。

[tangj1206]

这个问题我也遇到了 按照作者所说 给不同的slot取不同的id名字 最后发现没了toolbar这个id不仅报错 样式也出不来 请问正确的解决方式是什么

[bcjohnblue]

我也有遇到這個問題，vue spa架構，最後是讓每個vue-quill-editor給不同的id解決. In child component:

In parent component:

[TransFormes]

nuxt这种写法的话没有去定义到toolbar，请问有解决办法吗

又解决办法吗

[7NZ]

我用的element-ui。在dialog里面的form中使用了2个编辑器，它们的toolbar是不同的，并且用v-if判断渲染。 当2个编辑器根据条件来渲染时，我发现toolbar都是第一个编辑器的toolbar。 于是改成v-show，虽然toolbar不再是同一个，但是编辑器里面输入的时候，会出现奇怪的bug：输入一个字符后光标不再聚焦到编辑器，得再点一下鼠标才行，这样得输入一个字符就点一次鼠标，这显然是不行的。 最后我突然想到用vue的key指令，给每个编辑器都绑定一个key，发现此法可行。

<el-dialog>
  <el-form ref="dialogForm" label-width="100px" :model="formData" :rules="rules">
    ...
    <el-form-item v-if="formData.type != 1" label="内容：" prop="content">
      <quill-editor
          key="editor-width-image"
          ref="myQuillEditor"
          v-model="formData.content"
          class="myQuillEditor"
          :options="editorOption"
        />
    </el-form-item>
    ...
    <el-form-item v-if="formData.type == 1" label="详细说明：" prop="description">
      <quill-editor
          key="editor-width-no-image"
          ref="descQuillEditor"
          v-model="formData.description"
          class="myQuillEditor"
          :options="descEditorOption"
        />
    </el-form-item>
  </el-form>
</el-dialog>