editorjs-vue

BlockEditor.vue

<template>
  <div
    class="q-editor"
  >
    <div :id="holder" @change="onChange" />
  </div>
</template>

<script>
import EditorJS from '@editorjs/editorjs'
import editorUtils from './util'

export default {
  name: 'QBlockEditor',
  props: {
    value: {
      type: [Object],
      default: null,
    },

    /**
     * Id of the editor
     */
    holder: {
      type: String,
      default: () => 'vue-editor-js',
      require: true,
    },

    /**
     * EditroJS config
     */
    config: {
      type: Object,
      default: () => ({ }),
      require: true,
    },

    initialized: {
      type: Function,
      default: () => {},
    },
  },
  data: () => ({
    editor: null,
  }),

  watch: {
    value() {
      this.editor.render({ blocks: this.value.blocks })
    },
  },

  mounted() {
    this.initEditor()
  },

  beforeDestroy() {
    if (this.editor) {
      this.editor.destroy()
      this.editor = null
    }
  },

  methods: {
    initEditor() {
      this.editor = new EditorJS({
        holder: this.holder || 'vue-editor-js',
        minHeight: 50,
        ...this.config,
        tools: {
          ...editorUtils.defaultTools,
          ...this.config.tools,
        },
      })
      this.initialized(this.editor)
    },
  },
}
</script>

<style lang="scss" scoped>
  .q-editor{
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    padding: 10px;
  }
</style>

util.js

import Header from '@editorjs/header'
import List from '@editorjs/list'
import Raw from '@editorjs/raw'

const defaultTools = {
  header: Header,
  raw: Raw,
  list: {
    class: List,
    inlineToolbar: true,
  },
}

export default {
  defaultTools,
}