Skip to content

ReferenceError: filestack is not defined #8

@archerbj

Description

@archerbj

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions