TOAST UI Image Editor

Selecting an image in GrapesJS normally means swapping it for another file. This plugin adds an editing step: a toolbar button on every image component opens the TOAST UI Image Editor in a modal, and the edited result replaces the original.

How it works

The plugin registers a tui-image-editor command that takes a target — the component whose image is being edited. On confirm, GrapesJS takes the modified image, adds it to the Asset Manager and updates the target component.

Options

• config — the TOAST UI configuration object, including which menu opens first.
• onApply — replace the default save behaviour with your own logic, receiving the editor instance and the image model.
• upload — when set, the edited image is passed through the Asset Manager's uploader first, so the component receives a hosted URL instead of a data URL.
• addToAssets — whether the result is stored in the Asset Manager. On by default.
• height and width — modal dimensions, defaulting to 650px and 100%.
• hideHeader, toolbarIcon, labelApply and labelImageEditor — cosmetic control over the modal and the toolbar button.
• script and style — the assets loaded dynamically when no TOAST UI constructor is found on the page.

Good to know

Install as grapesjs-tui-image-editor. BSD-3-Clause.