在Next.js中使用react-quill添加Quill键盘绑定时编辑器消失的问题

你的代码存在两个关键问题，导致添加keyboard配置后编辑器无法正常渲染：

1. 键盘绑定的handler函数参数错误
   你在handler中直接对range调用insertText，但Quill键盘绑定的handler函数第一个参数是Quill实例，而非选区对象。insertText是Quill实例的方法，不是range的方法，这会导致运行时错误，进而让编辑器无法初始化。

2. 自定义绑定的逻辑缺失默认行为处理
   直接定义tab绑定但未阻止浏览器默认行为，且错误的调用逻辑会触发初始化异常，同时自定义绑定不会完全覆盖默认绑定，但错误的代码会阻断编辑器正常加载流程。

修复后的代码 #

'use client';
import React, { useState } from 'react';
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

const DocumentPage = () => {
  const [value, setValue] = useState('');

  const modules = {
    toolbar: [
     [{ header: [1, 2, 3, 4, 5, 6, false] }],
     ["bold", "italic", "underline", "strike", "blockquote", "script", "code"],
     [{ font: [] }, { size: [] }],
     [{ color: [] }, { background: [] }],
     [{ align: ["right", "center", "justify"] }],
     [{ list: "ordered" }, { list: "bullet" }],
     ["code-block", { indent: "-1" }, { indent: "+1" }, { direction: "rtl" }, { direction: "ltr" }],
     ["link", "image", "video"],
    ],
    keyboard: {
      bindings: {
        tab: {
          key: 9,
          // 修正handler参数：第一个为Quill实例，第二个为键盘事件
          handler: (quill, event) => {
            // 阻止tab键默认的焦点切换行为
            event.preventDefault();
            // 获取当前光标选区
            const range = quill.getSelection();
            if (range) {
              // 在光标位置插入制表符
              quill.insertText(range.index, '\t');
              // 调整光标到插入后的位置，保证编辑流畅
              quill.setSelection(range.index + 1);
            }
            return true;
          },
        },
      },
    }
  };

  return (
    <main className="p-4">
        <ReactQuill value={value} onChange={setValue} modules={modules} placeholder="Start Typing Here..." />
    </main>
  );
};

export default DocumentPage;

关键修复点说明 #

• 修正handler参数与调用逻辑：将handler参数改为Quill实例和键盘事件，通过quill.getSelection()获取当前选区，使用quill.insertText()完成制表符插入，同时调整光标位置。
• 阻止默认事件：添加event.preventDefault()避免tab键触发浏览器默认的焦点切换行为，确保输入制表符的逻辑生效。
• 保留默认绑定：Quill会自动合并自定义绑定与默认绑定，无需额外配置，只需要定义你需要新增或覆盖的绑定规则即可。

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