Next.js中React Quill遇Quill.import非函数错误及功能扩展求助

一、修复Quill.import不是函数错误 #

错误根源是动态导入react-quill时的解构逻辑错误：ReactQuill的Quill实例挂载在默认导出的属性上，而非直接导出。修改初始化逻辑如下：

// 替换原useEffect内的导入代码
const initQuill = async () => {
  try {
    const ReactQuillModule = await import('react-quill');
    const Quill = ReactQuillModule.default.Quill;
    // 后续注册逻辑...
  } catch (err) {
    console.error('Quill初始化失败:', err);
  }
};

同时将enableEditor初始值设为false，确保Quill模块注册完成后再渲染编辑器，避免渲染时机问题。

二、功能实现完整代码 #

1. 主组件 QuillWrapper.jsx #

'use client'

import React, { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';
import QuillToolbar, { formats, modules } from './EditorToolbar';

// 动态导入ReactQuill，禁用SSR
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });

const QuillWrapper = ({ value, setEditorValue, readOnly }) => {
  const [enableEditor, setEnableEditor] = useState(false);

  useEffect(() => {
    const initQuill = async () => {
      try {
        // 正确获取Quill实例
        const ReactQuillModule = await import('react-quill');
        const Quill = ReactQuillModule.default.Quill;

        // 注册自定义字号
        const Size = Quill.import('formats/size');
        Size.whitelist = ['extra-small', 'small', 'medium', 'large', 'extra-large'];
        Quill.register(Size, true);

        // 注册自定义字体
        const Font = Quill.import('formats/font');
        Font.whitelist = [
          'arial',
          'comic-sans',
          'courier-new',
          'georgia',
          'helvetica',
          'lucida',
          'tahoma',
          'times-new-roman',
          'verdana'
        ];
        Quill.register(Font, true);

        // 注册图片缩放模块
        const ImageResize = await import('quill-image-resize-module').then(m => m.default);
        Quill.register('modules/imageResize', ImageResize);

        // 注册完成后启用编辑器
        setEnableEditor(true);
      } catch (err) {
        console.error('Quill初始化失败:', err);
      }
    };

    initQuill();
  }, []);

  return (
    <>
      {enableEditor && (
        <>
          <QuillToolbar />
          <ReactQuill
            theme="snow"
            value={value}
            onChange={setEditorValue}
            readOnly={readOnly}
            modules={{
              ...modules,
              imageResize: {
                parchment: Quill.import('parchment'),
                modules: ['Resize', 'DisplaySize', 'Toolbar']
              }
            }}
            formats={[...formats, 'size', 'font']}
          />
        </>
      )}
    </>
  );
};

export default QuillWrapper;

2. 工具栏组件 EditorToolbar.jsx #

import React from 'react';
import ReactQuill from 'react-quill';

// 自定义工具栏配置，内置提示文本
const modules = {
  toolbar: [
    [{ header: [1, 2, 3, false], title: '选择标题级别' }],
    ['bold', 'italic', 'underline', 'strike'],
    [{ list: 'ordered' }, { list: 'bullet' }, { title: '列表类型' }],
    [{ indent: '-1' }, { indent: '+1' }, { title: '调整缩进' }],
    [{ size: ['extra-small', 'small', 'medium', 'large', 'extra-large'] }, { title: '选择字号' }],
    [{ font: ['arial', 'comic-sans', 'courier-new', 'georgia', 'helvetica', 'lucida', 'tahoma', 'times-new-roman', 'verdana'] }, { title: '选择字体' }],
    [{ color: [] }, { background: [] }, { title: '设置颜色' }],
    ['link', 'image', 'video', { title: '插入内容' }],
    ['clean', { title: '清除格式' }]
  ]
};

// 定义支持的格式集合
const formats = [
  'header',
  'bold', 'italic', 'underline', 'strike',
  'list', 'bullet', 'indent',
  'size', 'font',
  'color', 'background',
  'link', 'image', 'video'
];

// 自定义工具栏，添加hover提示样式
const QuillToolbar = () => {
  return (
    <div id="toolbar">
      <ReactQuill.Toolbar modules={modules} />
      <style jsx>{`
        .ql-toolbar button {
          position: relative;
        }
        .ql-toolbar button:hover::after {
          content: attr(title);
          position: absolute;
          bottom: 100%;
          left: 50%;
          transform: translateX(-50%);
          background: #333;
          color: #fff;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 12px;
          white-space: nowrap;
          z-index: 100;
          margin-bottom: 4px;
        }
      `}</style>
    </div>
  );
};

export default QuillToolbar;
export { modules, formats };

三、依赖安装 #

执行以下命令安装所需依赖：

npm install react-quill quill quill-image-resize-module

内容的提问来源于stack exchange，提问作者How to Program