渲染 Editor.js 时在 Nuxt 中出现 500 Element is not Defined 错误

Question

我正在尝试在 Nuxt 项目中使用 Editor.js 创建编辑器。 似乎当我渲染页面时 editor.js 还没有准备好。

import EditorJS from '@editorjs/editorjs';

interface IEditor {
  editor: EditorJS | null
}


export default defineComponent({
  data(): IEditor {
    return {
      editor: null
    };
  },

  methods: {
    initEditor() {
        this.editor = new EditorJS({
          holder: 'editor',
          placeholder: 'start text'
      })
    },
    destroyEditor() {
      if (this.editor) {
        this.editor.destroy();
      }
    }
  },

  mounted() {
    this.initEditor();
  },

  beforeUnmount() {
    this.destroyEditor();
  }
});

然后导入到我的页面中

<template>
  <div>
    <Editor/>
  </div>
</template>

当我尝试打开网址时出现此错误：

500 元素未定义

at ./node_modules/@editorjs/editorjs/dist/editorjs.umd.js:1:76
at Object. (./node_modules/@editorjs/editorjs/dist/editorjs.umd.js:1:192)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Answer 1

您应该创建

/components/Editor.vue

文件， 并在您的

/pages/editor.vue

中使用组件，如下所示：

<template>
  <!-- use ClientOnly tag wrap Editor component -->
  <ClientOnly>
    <Editor />
  </ClientOnly>
</template>

试试这个！ 对我来说效果很好！