Plugin api documentation

Your plugins will run in a sandbox which means you can't access other DOM elements of the app.storyblok.com application itself. We will pass you properties and methods to your plugin.

Properties

  • model : Current value of the plugin that; this object will be saved and retrieved in the API

  • options : Options parsed from the schema options array

  • schema : Schema options object

  • uid : Uid of the parent component

  • spaceId : Space id of the current space

  • storyId : Story id of the current story

  • storyItem : Object of current story

  • sbLanguage : Current language

  • api : Api function to call the delivery api

  • token : Draft token of the current space

Methods

  • initWith : Should be used to define the initial data of the plugin.

  • pluginCreated : Should be used to initialize the plugin. Examples: Load data from Storyblok or external sources, Load and initialize a WYSIWYG editor.

Helpers

In the $sb variable are stored commonly used helper functions.

  • $sb.getScript: Enables you to load external resources with a callback

this.$sb.getScript('https://use.fontawesome.com/releases/v5.0.9/js/all.js', () => {
  // script available
})

Events

Storyblok events will send specific triggers to the parent app.storyblok.com to change the sandbox appearance and behavior in the application.

  • this.$emit('toggle-modal', true): Opens the plugin in an full-screen overlay

  • this.$emit('toggle-modal', false): Closes the plugin full-screen overlay.

Getting current context

If you want to check the content model you can emit the get-context event like this:

this.$emit('get-context')
this.$onGetContext(() => {
  console.log(this.storyItem)
})
Docs
Back