Vue Quill样式仅生效于首个编辑器及工具栏自定义求助

问题根源 #

你遇到的核心问题是重复使用了唯一ID：每个UtilQuill组件里的工具栏都用了id="toolbar"，而HTML规范中ID必须全局唯一。Quill编辑器初始化时会根据toolbar="#toolbar"选择器查找对应的DOM元素，只有第一个匹配到的工具栏会被绑定，后续编辑器找不到有效工具栏，导致Snow主题的样式无法正常渲染到这些编辑器上。

解决方案：给工具栏生成唯一ID #

修改UtilQuill.vue，利用传入的comment-id生成每个工具栏的唯一ID，确保每个编辑器能绑定到自己的工具栏：

<template>
  <div v-if="isOpen" class="quill-editor-wrapper">
    <!-- 绑定唯一的工具栏选择器 -->
    <QuillEditor :toolbar="`#toolbar-${commentId}`" theme="snow">
      <template #toolbar>
        <!-- 生成唯一ID的工具栏容器 -->
        <div :id="`toolbar-${commentId}`">
          <button class="ql-image"></button>
          <button class="ql-link"></button>
        </div>
      </template>
    </QuillEditor>
  </div>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import 'quill/dist/quill.snow.css'

export default {
  // 接收commentId属性
  props: ['isOpen', 'commentId'],
  setup: (props) => {
    return { 
      isOpen: props.isOpen,
      commentId: props.commentId
    };
  },
  components: {
    QuillEditor,
  },
};
</script>

修改后，每个评论下的编辑器都会有自己唯一的工具栏，Snow主题样式就能正常应用到所有实例了。

另外，CSS导入建议全局统一处理：在Nuxt3的nuxt.config.ts中配置全局导入，或者在app.vue中导入一次quill/dist/quill.snow.css，避免组件重复导入可能的冗余问题。

自定义工具栏的几种方式 #

1. 自定义HTML结构（当前方式） #

通过#toolbar插槽编写自定义工具栏HTML，给按钮添加Quill预设的类名（如ql-bold、ql-image）即可自动绑定对应功能。如果需要调整样式，直接通过CSS修改.ql-toolbar、.ql-button等类即可。

2. 使用数组快速配置 #

无需编写HTML，直接给toolbar属性传配置数组，Quill会自动生成工具栏：

<QuillEditor 
  :toolbar="[
    ['bold', 'italic', 'underline'],
    ['link', 'image'],
    [{ list: 'ordered' }, { list: 'bullet' }]
  ]" 
  theme="snow" 
/>

3. 自定义功能按钮 #

如果需要添加自定义功能，可通过Quill API注册自定义格式并绑定事件：

<script setup>
import { QuillEditor, useQuill } from '@vueup/vue-quill'
import 'quill/dist/quill.snow.css'
import { onMounted } from 'vue'
import Quill from 'quill'

const quillInstance = useQuill()

onMounted(() => {
  if (!quillInstance.value) return

  // 注册自定义格式（示例）
  class CustomFormat extends Quill.import('formats/inline') {
    static blotName = 'customFormat'
    static tagName = 'span'
    static className = 'custom-format'
  }
  Quill.register(CustomFormat, true)

  // 获取工具栏模块，绑定自定义按钮事件
  const toolbar = quillInstance.value.getModule('toolbar')
  toolbar.addHandler('customBtn', (value) => {
    if (value) {
      quillInstance.value.format('customFormat', true)
    } else {
      quillInstance.value.format('customFormat', false)
    }
  })
})
</script>

<template>
  <QuillEditor toolbar="#custom-toolbar" theme="snow">
    <template #toolbar>
      <div id="custom-toolbar">
        <button class="ql-bold"></button>
        <!-- 自定义按钮 -->
        <button class="ql-customBtn">自定义样式</button>
      </div>
    </template>
  </QuillEditor>
</template>

<style scoped>
.custom-format {
  color: red;
  font-weight: bold;
}
</style>

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