API Documentation

Your plugin will run in a sandbox, which means you can’t access other DOM elements of the app.storyblok.com application itself. However, Storyblok passes specific properties and methods to the plugin.

Properties

Property	Description
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
storyItem	Object of the current story
sbLanguage	Current language
api	API function to call the delivery API
token	Draft token of the current space
blockId	uid of the blok the field type plugin is active in (will be undefined outside of the Visual Editor)
userId	id of the user that is currently using the interface

Methods

Method	Description
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

The $sb variable contains commonly used helper functions.t

Helper	Description
$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.

Event	Description
this.$emit(‘toggle-modal’, true)	Opens the plugin in a full-screen overlay
this.$emit(‘toggle-modal’, false)	Closes the plugin full-screen overlay

Get the 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);
});

Built-in components (proxy components)

You can use Storyblok’s built-in components in your custom field type for user input that requires access to the Management API.

Asset selector

This proxy component lets the user select an image and sets the image URL to an attribute of your field plugin. The field attribute needs to be the key to your model attribute.

<sb-asset-selector :uid="uid" field="your_model_attribute"> </sb-asset-selector>

Tip

your_model_attribute needs to be a property in your model that you pass in the initWith method.