Nuxt 3集成Quill Editor自定义工具栏报错：quill:toolbar Container required

问题描述 #

已被困该问题超3小时，尝试在Nuxt 3中使用带自定义工具栏的Quill Editor，代码如下：

模板代码： #

<client-only>
   <QuillEditor
      theme="snow"
      ref="quill"
      contentType="html"
      :options="editorOption"
      toolbar="#toolbar"
      v-model:content="forms.content"
   />
</client-only>

JS代码： #

data(){
   return {
     editorOption: {
        theme: "snow",
        placeholder: "Write something...",
        modules: {
          toolbar: "#toolbar"
        },
     },
   }
}

报错信息： #

quill:toolbar Container required for toolbar 

{
    "container": "#toolbar",
    "handlers": {}
}

[Vue warn]: Unhandled error during execution of mounted hook 
  at <QuillEditor theme="snow" ref="quill" contentType="html"

报错原因 #

• 缺少工具栏DOM元素：仅指定了工具栏选择器#toolbar，但模板中没有对应的HTML容器，Quill找不到目标元素
• 重复配置冲突：同时在QuillEditor组件的toolbar属性和editorOption.modules.toolbar中配置工具栏，导致初始化逻辑混乱
• 客户端渲染时机问题：虽使用了<client-only>，但如果工具栏元素在Quill初始化时还未挂载到DOM，也会触发找不到容器的错误

解决方案 #

步骤1：添加自定义工具栏DOM #

在<client-only>内部、QuillEditor之前添加工具栏容器，示例如下：

<client-only>
  <!-- 自定义工具栏容器 -->
  <div id="toolbar">
    <button class="ql-bold">加粗</button>
    <button class="ql-italic">斜体</button>
    <button class="ql-underline">下划线</button>
    <!-- 可根据需求添加更多工具栏按钮 -->
  </div>

  <QuillEditor
    theme="snow"
    ref="quill"
    contentType="html"
    :options="editorOption"
    v-model:content="forms.content"
  />
</client-only>

步骤2：移除重复的toolbar配置 #

删除QuillEditor组件上的toolbar="#toolbar"属性，仅保留editorOption中的配置，避免冲突：

data(){
   return {
     editorOption: {
        theme: "snow",
        placeholder: "Write something...",
        modules: {
          toolbar: "#toolbar" // 仅保留此处配置
        },
     },
   }
}

可选优化：确保DOM挂载后初始化（针对极端情况） #

如果仍存在时机问题，可通过onMounted钩子结合nextTick确保DOM完全挂载后再初始化：

import { onMounted, nextTick, ref } from 'vue'

export default {
  setup() {
    const quill = ref(null)
    const forms = ref({ content: '' })
    const editorOption = ref({
      theme: "snow",
      placeholder: "Write something...",
      modules: {
        toolbar: "#toolbar"
      },
    })

    onMounted(async () => {
      await nextTick() // 等待DOM完全挂载
    })

    return { quill, forms, editorOption }
  }
}

验证 #

完成上述修改后重新运行Nuxt3项目，Quill Editor应能正常识别自定义工具栏容器，不再报错。

内容的提问来源于stack exchange，提问作者Ashta V