在Next.js项目中集成Editor.js遇初始化异常求助

核心问题分析 #

你遇到的问题本质是Editor.js依赖浏览器DOM环境，而Next.js的服务端渲染（SSR）阶段没有DOM；同时直接在组件顶层初始化会赶在DOM挂载前执行，导致Editor找不到目标holder元素，自然无法完成渲染。

正确实现步骤 #

1. 带SSR禁用的动态导入
   用next/dynamic导入Editor.js时明确禁用服务端渲染，确保代码只在客户端环境执行：

   import dynamic from 'next/dynamic';
   // 禁用SSR，仅在客户端加载Editor.js
   const EditorJS = dynamic(() => import('@editorjs/editorjs'), {
     ssr: false,
     loading: () => <p>编辑器加载中...</p>
   });
   

2. 在useEffect中初始化编辑器
   必须等DOM元素挂载完成后再初始化，用useRef获取holder节点，配合useEffect执行初始化逻辑：

   import { useEffect, useRef } from 'react';
   
   export default function BlogEditor() {
     // 存储holder DOM节点的引用
     const editorHolderRef = useRef(null);
     // 存储编辑器实例，方便后续销毁
     const editorInstanceRef = useRef(null);
   
     useEffect(() => {
       // 避免重复初始化
       if (!editorHolderRef.current || editorInstanceRef.current) return;
   
       // 异步初始化编辑器
       const initEditor = async () => {
         const Editor = (await import('@editorjs/editorjs')).default;
         editorInstanceRef.current = new Editor({
           // 直接传入DOM节点，比用id更可靠
           holder: editorHolderRef.current,
           // 配置编辑器工具（根据需求添加）
           tools: {
             header: {
               class: (await import('@editorjs/header')).default,
               config: { placeholder: '输入文章标题' }
             },
             list: {
               class: (await import('@editorjs/list')).default
             }
           }
         });
       };
   
       initEditor();
   
       // 组件卸载时销毁编辑器，防止内存泄漏
       return () => {
         if (editorInstanceRef.current) {
           editorInstanceRef.current.destroy();
         }
       };
     }, []);
   
     return (
       <div className="editor-container">
         <div ref={editorHolderRef} />
       </div>
     );
   }
   

关键注意事项 #

• 不能移除useEffect：组件顶层代码会在SSR阶段或DOM挂载前执行，此时holder元素还不存在，Editor无法完成初始化。
• 优先用useRef获取DOM节点：相比依赖id="editorjs"的选择器，直接传入DOM节点能避免路由切换、组件复用场景下的选择器冲突。
• 插件也要客户端加载：如果使用Editor.js的第三方工具（如header、list），需用动态导入确保它们不在服务端执行。

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