如何为Nuxt3+Vue版Quill编辑器正确添加hr按钮？

问题原因 #

你遇到的情况是因为Vue/Nuxt兼容的Quill封装（如@vueup/vue-quill）对toolbar的handlers做了封装，直接通过quill.getModule('toolbar').handlers['hr']赋值不会生效，且你看到的嵌套hr字段是组件内部的结构，并非可直接赋值的handler入口。另外原代码用insertText插入HTML会被转义，无法渲染为水平线。

解决方案 #

方案1：通过组件Props传入自定义Handler（推荐） #

这是Vue/Nuxt Quill组件的标准用法，无需在@ready事件中修改：

1. 配置Toolbar和自定义Handler

<template>
  <QuillEditor
    ref="quillEditor"
    :toolbar="toolbarConfig"
    :handlers="customHandlers"
  />
</template>

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

// 配置Toolbar，确保HR按钮存在
const toolbarConfig = [
  ['bold', 'italic', 'underline'],
  ['hr'] // 加入HR按钮
]

// 定义HR按钮的自定义Handler
const customHandlers = {
  hr: () => {
    const quill = quillEditor.value.getQuill()
    const selection = quill.getSelection()
    if (!selection) return

    const cursorPos = selection.index
    // 插入水平线（使用Quill的embed方式，避免HTML转义）
    quill.insertText(cursorPos, '\n', 'user')
    quill.insertEmbed(cursorPos + 1, 'divider', true, 'user')
    quill.insertText(cursorPos + 2, '\n', 'user')
    // 调整光标位置
    quill.setSelection(cursorPos + 3)
  }
}

const quillEditor = ref(null)
</script>

方案2：在@ready事件中修正Handler赋值 #

如果必须在@ready事件中处理，需要找到正确的Handler层级（针对你看到的嵌套hr字段）：

const onQuillReady = (quill) => {
  // 先打印handlers结构确认层级，比如如果嵌套在format下：
  console.log(quill.getModule('toolbar').handlers)
  // 假设输出结构为 { format: { hr: { handler: undefined } } }
  quill.getModule('toolbar').handlers.format.hr.handler = () => {
    const selection = quill.getSelection()
    if (!selection) return
    const cursorPos = selection.index
    // 正确插入水平线（避免转义）
    quill.insertText(cursorPos, '\n', 'user')
    quill.insertEmbed(cursorPos + 1, 'divider', true, 'user')
    quill.insertText(cursorPos + 2, '\n', 'user')
    quill.setSelection(cursorPos + 3)
  }
}

方案3：自定义HR Blot（更灵活） #

如果需要自定义水平线样式，可注册自定义Blot：

// 在组件初始化前注册Blot
import Quill from 'quill'
const Block = Quill.import('blots/block')

class HrBlot extends Block {
  static create(value) {
    const node = super.create(value)
    node.classList.add('custom-hr')
    node.innerHTML = '<hr>'
    return node
  }
}
HrBlot.blotName = 'hr'
HrBlot.tagName = 'div'
Quill.register(HrBlot)

// Handler中使用
const customHandlers = {
  hr: () => {
    const quill = quillEditor.value.getQuill()
    const selection = quill.getSelection()
    if (!selection) return
    quill.insertEmbed(selection.index, 'hr', true, 'user')
    quill.setSelection(selection.index + 1)
  }
}

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