Field-Type API Documentation
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.
Section titled 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 |
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 |
Section titled 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
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
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 |
Section titled 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)
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
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>
your_model_attribute needs to be a property in your model that you pass in the initWith method.
![field-type API](https://a.storyblok.com/f/88751/2880x1680/27bdb8b98e/field-type-api.png/m/840x0/filters:quality(90))