filestack icon indicating copy to clipboard operation
filestack copied to clipboard

ReferenceError: filestack is not defined

Open archerbj opened this issue 4 years ago • 0 comments

I'm using grapesjs in a starter vue project. Here is the code

import 'grapesjs/dist/css/grapes.min.css'
import grapesjs from 'grapesjs'
import gjsPresetWebpage from 'grapesjs-preset-webpage'

// i18n
import zh from 'grapesjs/locale/zh'

// filestack
import pluginFileStack from 'grapesjs-plugin-filestack'
console.log(pluginFileStack)
export default {
  name: 'HelloWorld',
  data () {
    return {
      editor: {},
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.editor = grapesjs.init({
      // Indicate where to init the editor. You can also pass an HTMLElement
      container: '#gjs',
      // Get the content for the canvas directly from the element
      // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
      fromElement: true,
      // Size of the editor
      height: '500px',
      width: 'auto',
      i18n: {
        locale: 'zh', // default locale
        detectLocale: false, // by default, the editor will detect the language
        localeFallback: 'zh', // default fallback
        messages: { zh }
      },
      // Disable the storage manager for the moment
      // storageManager: {
      //   type: 'remote',
      //   stepsBeforeSave: 10,
      //   urlStore: 'http://store/endpoint',
      //   urlLoad: 'http://load/endpoint',
      //   params: {}, // Custom parameters to pass with the remote storage request, eg. CSRF token
      //   headers: {} // Custom headers for the remote storage request
      // },
      // Default configurations
      storageManager: {
        id: 'gjs-', // Prefix identifier that will be used on parameters
        type: 'local', // Type of the storage
        autosave: true, // Store data automatically
        autoload: true, // Autoload stored data on init
        stepsBeforeSave: 1 // If autosave enabled, indicates how many changes are necessary before store method is triggered
      },
      plugins: [gjsPresetWebpage, pluginFileStack],
      pluginsOpts: {
        'gjs-plugin-filestack': {}
      }
    })

it shows error

ReferenceError: filestack is not defined
    at eval (grapesjs-preset-webpage.min.js?3094:15)
    at eval (grapes.min.js?e1c1:11)
    at Array.forEach (<anonymous>)
    at Object.init (grapes.min.js?e1c1:11)
    at VueComponent.mounted (HelloWorld.vue?18db:29)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)
    at callHook (vue.esm.js?efeb:4228)
    at Object.insert (vue.esm.js?efeb:3148)
    at invokeInsertHook (vue.esm.js?efeb:6357)
    at Vue.patch [as __patch__] (vue.esm.js?efeb:657

archerbj avatar Nov 07 '20 16:11 archerbj