Vue Integration

[bratchan]

This is my first time working with grapejs. I been looking at all sorts of different things for Vue/Grapesjs. Any of the library's are year or so old, so I rather avoid them if I can.

I currently have it up and working right now. But for the content blocks I would love to have them as Vue components vs just the html that they currently are. I was wondering if anyone has a way to do this.

[bgrand-ch]

Hello,

import Vue from 'vue'
import grapesjs from 'grapesjs'

export default {
  name: 'VueComponentName',

  data () {
    return {
      editor: null
    }
  },

  created () {
    const editorOptions = {}

    this.editor = grapesjs.init(editorOptions)
  },

  mounted () {
    // Text Editor
    // https://grapesjs.com/docs/api/rich_text_editor.html
    // https://css-tricks.com/creating-vue-js-component-instances-programmatically/
    const editorRte = this.editor.RichTextEditor
    const editorToolbar = editorRte.getToolbarEl()
    const TextEditorClass = Vue.extend(TextEditor)
    const textEditor = new TextEditorClass({
      // https://vuejs.org/v2/guide/components-props.html
      propsData: {
        editor: this.editor,
        $store: this.$store
      }
    })

    textEditor.$mount()

    editorToolbar.innerHTML = ''
    editorToolbar.appendChild(textEditor.$el)
  }
}