Grapesjs Script Editor

GrapesJS components can carry their own scripts, but there is no interface for writing one. This plugin adds it: select a component, open the script modal from its toolbar, and the code you write is bound to that element.

What it adds

An edit-script command and a component toolbar button that opens it. Scripts live on the component, so duplicating or moving the element carries its behaviour along with it.

Options

• starter — the code the editor opens with. Defaults to let el = this, the reference to the component the script belongs to.
• scriptTypesSupport — component types allowed to have scripts attached: default, wrapper, text, textnode, image, video and svg by default. Keep components that already define their own scripts out of this list.
• onRun — runs when the syntax check passes.
• onError — receives the error when it does not, so you can surface it in your own interface.
• modalTitle, buttonLabel and toolbarIcon — the modal heading, save button label and toolbar icon.
• codeViewOptions — options for the underlying code viewer.
• commandAttachScript — extend the command itself.

Good to know

Register the plugin after your other components. Install as grapesjs-script-editor.