Creating a Storyblok field type plugin

We built Storyblok with a robust and flexible plugin system to give you the possibility to extend the editor with custom fields like a color picker or a google maps location selector. It’s basically a Vue.js 2.5.2 component extended with a few helpers in the window.Storyblok.plugin variable.

This is a typical field type plugin:

A field type plugin

How to develop field type plugins?

You can develop field type plugins inside Storyblok using ES6 Javascript. On the top left corner you can find the official and personal “Plugins” in the submenu.

Storyblok Plugin Endresult

Available Vue.js properties

The properties that are passed to the field type are:

  • 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
  • model: Current value of the fieldtype
  • api: Api function to call the delivery api
  • token: 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.

How to call the Storyblok api?

In fieldtypes you can use this.api to get access to the Storyblok delivery api. You can use it for example to build a selectbox of stories.

this.api(`cdn/stories`)
.get()
.then((res) => {
  this.stories = res.data.stories
})

How to pass options?

To pass options that are configurable in the schema definition define the option keys in the “Input” box. The values will be available in the this.options object.

Img

How to use the field type plugin?

After creating the plugin, you can define it in the schema configuration of your components. Choose ‘Custom Plugins’ as the type and search for your plugin.

Storyblok use the plugin

Documentation