Skip to content

Instantly share code, notes, and snippets.

@MichaelGitArt

MichaelGitArt/BlockEditor.vue

Created June 15, 2021 20:42
Download ZIP

Revisions

  1. MichaelGitArt revised this gist Jun 15, 2021. No changes.
  2. MichaelGitArt revised this gist Jun 15, 2021. 1 changed file with 16 additions and 1 deletion.
    17 changes: 16 additions & 1 deletion util.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,16 @@
    ‎‎​
    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,
    }
  3. MichaelGitArt revised this gist Jun 15, 2021. No changes.
  4. MichaelGitArt revised this gist Jun 15, 2021. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions util.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​
  5. MichaelGitArt revised this gist Jun 15, 2021. 1 changed file with 88 additions and 1 deletion.
    89 changes: 88 additions & 1 deletion BlockEditor.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,88 @@
    ‎‎​
    <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>
  6. MichaelGitArt created this gist Jun 15, 2021.
    1 change: 1 addition & 0 deletions BlockEditor.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​