hi, how to use editor.js in nuxt.js, is there an example?

[Yakumo-Yukari]

How to use editor.js in nuxt.js, are there any related examples?

[neSpecc]

Related #1036

[zabavnikov]

Hi @Yakumo-Yukari! Try this.

<template>
  <div id="codex-editor"></div>
</template>

<script>
  let EditorJS = null;

  if (process.client) {
    EditorJS = require('@editorjs/editorjs')
  }

  export default {
    mounted() {
      const editor = new EditorJS({
        /**
         * Id of Element that should contain Editor instance
         */
        holder: 'codex-editor'
      });
    }
  }
</script>

[Yakumo-Yukari]

Hi @Yakumo-Yukari! Try this.

<template>
  <div id="codex-editor"></div>
</template>

<script>
  let EditorJS = null;

  if (process.client) {
    EditorJS = require('@editorjs/editorjs')
  }

  export default {
    mounted() {
      const editor = new EditorJS({
        /**
         * Id of Element that should contain Editor instance
         */
        holder: 'codex-editor'
      });
    }
  }
</script>

Thanks for the example

[gbgb66]

Hi @Yakumo-Yukari! Try this.

<template>
  <div id="codex-editor"></div>
</template>

<script>
  let EditorJS = null;

  if (process.client) {
    EditorJS = require('@editorjs/editorjs')
  }

  export default {
    mounted() {
      const editor = new EditorJS({
        /**
         * Id of Element that should contain Editor instance
         */
        holder: 'codex-editor'
      });
    }
  }
</script>

it's works, but how import tools?

[Yakumo-Yukari]

Hi @Yakumo-Yukari! Try this.

<template>
  <div id="codex-editor"></div>
</template>

<script>
  let EditorJS = null;

  if (process.client) {
    EditorJS = require('@editorjs/editorjs')
  }

  export default {
    mounted() {
      const editor = new EditorJS({
        /**
         * Id of Element that should contain Editor instance
         */
        holder: 'codex-editor'
      });
    }
  }
</script>

it's works, but how import tools?

Thank you so much for your help.

[joffreyBerrier]

Hi, you can do better in Nuxt3 like that:

<script setup lang="ts">
  const uploadEditorJS = () => import('@editorjs/editorjs')
  let Editor = null

  onMounted(async () => {
    try {
      const editor = await uploadEditorJS()
      Editor = new editor.default({
        holder: 'editorjs',
      })
    } catch (err) {
      console.log(err)
    }
  })
</script>

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

🙏