Field-Type 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

• 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 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

• 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.

• $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 a 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)
})

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 {2} and sets the image URL to an attribute of your custom field-type. The field attribute needs to be the key to your model attribute. Following an example {1}:

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

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