GrapesJS TOAST UI image editor: follow a crop through Apply and project save

A useful test is a fictional workshop page containing two photographs: the equipment desk and the room entrance. Crop only the desk photograph. After Apply, the entrance photograph must remain unchanged, and reopening the saved project must preserve the edited desk image.

Open the image that the author selected

Use the plugin with the GrapesJS and TOAST UI versions your application has actually installed. The repository documents plugin registration and its tui-image-editor command. In an already initialized editor with the plugin registered:

const target = editor.getSelected();
if (target && target.is('image')) {
  editor.runCommand('tui-image-editor', { target });
}

editor is the existing GrapesJS instance. This fragment does not load either library or create a canvas. Passing the selected image explicitly makes the intended target clear. Do not pass a surrounding section merely because that section contains an image. GrapesJS component API

If the modal does not open, first check that the selected component is an image and that the TOAST UI constructor and required styles loaded. The plugin supports a supplied constructor as well as its documented script-loading path. Keep those dependencies deliberate instead of combining unrelated CDN versions until a toolbar appears.

Choose the default Apply path before writing a callback

For the normal plugin behavior, these options have different purposes:

These are not three independent switches that always run together. The plugin implementation branches on onApply before its built-in crop/upload logic. If you supply a callback just to log a value, you have also taken responsibility for applying the image. In particular, a callback must account for a crop that has not yet been committed within TOAST UI.

Keep the default behavior while checking the first successful crop. Use a custom callback only when the application needs a different storage or approval process.

Separate the edited pixels from a durable URL

The default non-upload path can set the component's source to a data URL. That embeds image data in the value; it does not upload a file to your media service. If the application uses uploads, its Asset Manager configuration and actual endpoint must handle the request and return the documented asset result. GrapesJS asset uploads

Inspect the selected component after Apply:

const imageSource = target.get('src');
console.log(imageSource);

A data: source and an https: source need different checks. For a data URL, consider the size of the project data and the exported document. For an HTTPS URL, open the actual returned image with the intended reader's access and confirm it contains the crop. Neither URL shape proves that the GrapesJS project itself was saved.

An image can display normally but fail when the editor tries to export edited pixels. Cross-origin images need appropriate CORS permission for canvas readback. If Apply reports a canvas security error, inspect the source image's origin and response headers rather than changing project storage. MDN canvas and cross-origin images

Reopen the editable project, then check the exported page

GrapesJS recommends its JSON project data for restoring an editable project. HTML and CSS export alone can lose editor information. Use your configured storage or capture the project data through the documented API:

// Capture this after Apply has finished updating the image component.
const projectData = editor.getProjectData();

That reads the project; your application still needs to persist it successfully. A later editor can restore a saved project through loadProjectData(). GrapesJS storage manager

For the workshop page, apply a crop that keeps the desk sign visible and excludes an empty wall. Save through the application's normal route, reopen the same project, and inspect both images. Then check the exported page: the desk sign should remain readable at the intended display size, while the entrance image retains its original framing.

If an image uploads but disappears from a saved document, the Froala image persistence guide illustrates the separate file and document checks. GrapesJS adds its own project model to that diagnosis. Keep the original photograph until the cropped derivative, editable project, and reader's page have all been checked.