Custom Code

Sooner or later someone needs to drop a third-party embed into a page — an analytics snippet, a chat widget, a payment form. This plugin gives them a safe place to do it without opening the code editor for the whole document.

What it adds

• A custom-code block and component.
• A custom-code:open-modal command, plus a toolbar button on the component that opens it.

Inside the canvas

Scripts cannot execute inside the editor canvas the way they will on the published page, so the component renders a placeholder in their place. placeholderScript controls what that placeholder looks like.

Options

• modalTitle — the modal heading, defaulting to Insert your code.
• codeViewOptions — options passed to the code viewer, such as its theme or read-only state.
• buttonLabel — the save button label.
• blockCustomCode and propsCustomCode — extend the block and the component definition; pass a falsy block value to register the component without adding a block.
• toolbarBtnCustomCode — extend or suppress the component toolbar button.
• commandCustomCode — override the command's own methods.

Requirements

GrapesJS v0.14.25 or higher. Install as grapesjs-custom-code. BSD-3-Clause.