I've been working on creating an editor using Editor.js within my Nuxt project, but it seems like the editor isn't initializing properly when I render the page.
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();
}
});
After that, I tried importing it into my page with the following code:
<template>
<div>
<Editor/>
</div>
</template>
But when I attempt to open the URL, I encounter the following error:
500 Element is not defined
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)