在Nuxt 3项目中集成EditorJS时遇Element未定义错误求助

问题原因 #

EditorJS依赖浏览器环境的DOM API（比如Element），而Nuxt3默认是服务端渲染(SSR)，服务端没有这些浏览器专属对象，直接导入初始化会导致服务端执行时报错。

解决方案 #

需要确保EditorJS的导入和初始化只在客户端执行，并且等待DOM挂载完成后再初始化编辑器。

修改./pages/write.vue代码如下：

<template>
  <div>
    writing
  </div>
  <div id="editorjs"></div>
</template>

<script setup>
import { onMounted } from 'vue';

let editor = null;

onMounted(async () => {
  // 动态导入EditorJS及其工具，确保只在客户端加载
  const { default: EditorJS } = await import('@editorjs/editorjs');
  const { default: Header } = await import('@editorjs/header');
  const { default: List } = await import('@editorjs/list');

  // 初始化编辑器
  editor = new EditorJS({
    holder: 'editorjs',
    tools: { 
      header: Header, 
      list: List 
    }, 
  });
});

// 封装保存方法，按需调用
const saveEditor = async () => {
  if (editor) {
    const outputData = await editor.save();
    console.log('article data : ', outputData);
  }
};
</script>

关键改动说明 #

• 使用onMounted钩子：确保DOM元素#editorjs已经渲染完成后再初始化编辑器
• 动态导入(await import())：替代静态import，让EditorJS相关代码只在客户端加载执行，避免服务端渲染时触发错误
• 延迟save()调用：原代码直接在模块级别调用editor.save()，此时编辑器未初始化且处于服务端环境，现在把保存逻辑封装成方法，按需调用

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