Next.js中SunEditor-react插件无法正常使用问题求助

问题分析 #

编辑器本身可正常运行，但点击图片上传、插入表格等插件按钮时触发报错，核心原因是插件导入与配置方式错误，导致插件未被正确初始化并注入编辑器。当前动态导入仅加载了插件模块，但未正确提取和传入所需的插件实例。

修复步骤 #

1. 修正插件导入逻辑

调整动态导入方式，确保正确获取插件模块内的插件对象：

import "suneditor/dist/css/suneditor.min.css"; // 保留SunEditor样式导入

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

// 动态导入插件模块，获取完整插件对象
const plugins = dynamic(() => import("suneditor/src/plugins"), {
  ssr: false,
});

2. 正确配置编辑器插件选项

在setOptions中，将plugins设置为所需插件的实例数组（而非整个插件对象），同时避免setAllPlugins与手动配置插件的冲突：

<SunEditor
  getSunEditorInstance={getSunEditorInstance}
  lang="en"
  placeholder="Please type here..."
  autoFocus={true}
  setOptions={{
    height: "80vh",
    code: "en",
    buttonList: [
      ["undo", "redo"],
      [
        "bold", "italic", "underline", "strike", "subscript", "superscript",
        "fontColor", "hiliteColor", "align", "outdent", "indent", "list", "removeFormat"
      ],
      ["image", "table"],
      ["showBlocks", "codeView"],
    ],
    // 传入需要启用的插件实例数组
    plugins: [plugins.image, plugins.table]
  }}
  setDefaultStyle="font-family: cursive; font-size:16px;"
  disable={loading}
  onChange={handleChange}
  handleImageUploadBefore={handleImageUploadBefore}
  onImageUpload={handleImageUpload}
  setContents={content}
  // 手动指定插件时建议移除该属性，避免配置冲突
  // setAllPlugins={true}
/>

3. 可选：全局加载所有插件

若需启用全部插件，可将plugins设为插件模块所有值组成的数组：

setOptions={{
  // ...其他配置项
  plugins: Object.values(plugins)
}}

关键说明 #

• SunEditor的plugins选项要求传入插件实例数组，直接传入整个插件模块对象会导致编辑器无法识别插件。
• setAllPlugins={true}会尝试自动加载所有插件，但在动态导入场景下可能因加载时机问题失效，手动指定所需插件更稳定可靠。

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