v8.48.3

Editor events

A list of events which we can use to respond to the editor interface state.

Editor Events

These are the events fired by the editor instance.

Name Description
'init' Fired when the editor instance is initialised.
'ready' Fired when editor UI is ready for input.
'undo' Fired on undo action.
'redo' Fired on redo action.
'revert' Fired on revert action. Will only be fired if willRevert resolves with true.
'destroy' Fired when the editor is destroyed.
'close' Fired when the editor is closed with the close button.
'selectutil' Fired when an editor util is selected.
'selectcontrol' Fired when a control in the editor is selected, currently only fires for markup editor tools.
'pan' Fired when user pans the image.
'zoom' Fired when user zooms the image.

init

Fired when the editor instance is initialised, receives the instance as parameter.

ready

Fired when the editor interface is ready to be interacted with.

Instances created with the openEditor JavaScript API fire a couple additional events.

Name Description
'show' Fired when the modal is shown.
'hide' Fired when the modal is hidden.

show

Fired when the modal is shown.

hide

Fired when the modal is hidden.

close

Fired when the modal is closed using the top left close button.

selectutil

Fired when an editor util is selected, receives the util id.

selectcontrol

Fired when a control in the editor is selected, receives the tool id, currently only fires for markup editor tools.

zoom

Fired when user zooms image.

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    editor.on('zoom', (value) => {
        console.log('zoom level', value);
    });
</script>

pan

Fired when user pans image.

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    editor.on('pan', (translation) => {
        console.log('translation', translation);
    });
</script>