Storyblok Raises $80M Series C - Read News

Skip to main content

Field-Type API Documentation

INFO:

On May 13th, 2024, Storyblok started gradually rolling out a new design for its Visual Editor. Therefore, the Visual Editor product screenshots depicted in this resource may not match what you encounter in the Storyblok App. For more information and a detailed reference, please consult this FAQ on the new Visual Editor design.

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

ModelCurrent value of the plugin that; this object will be saved and retrieved in the API
optionsOptions parsed from the schema options array
schemaSchema options object
uidUid of the parent component
spaceIdSpace id of the current space
storyItemObject of the current story
sbLanguageCurrent language
apiAPI function to call the delivery API
tokenDraft token of the current space
blockIduid of the blok the field type plugin is active in (will be undefined outside of the Visual Editor)
userIdid of the user that is currently using the interface

Methods

initWithShould be used to define the initial data of the plugin.
pluginCreatedShould 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.getScriptEnables 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 behaviour 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>
hint:

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

field-type API
1
2