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 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 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
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 overlaythis.$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.
