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.
Section titled Properties Properties
model
: Current value of the plugin that; this object will be saved and retrieved in the APIoptions
: Options parsed from the schema options arrayschema
: Schema options objectuid
: Uid of the parent componentspaceId
: Space id of the current spacestoryId
: Story id of the current storystoryItem
: Object of the current storysbLanguage
: Current languageapi
: API function to call the delivery APItoken
: Draft token of the current spaceblockId
: 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
Section titled Methods 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.
Section titled Helpers 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 })
Section titled Events 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 overlaythis.$emit('toggle-modal', false)
: Closes the plugin full-screen overlay.
Section titled Getting current context 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) })
Section titled Built-in Components (Proxy Components) 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.
Section titled Asset selector 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.