Editor events

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

Editor Events
Modal Events

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`.
`'writehistory'`	Fired when a history entry is added to the history stack.
`'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.

index.html

<!DOCTYPE html>

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

<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>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const handleEditorZoom = (value) => {
        console.log('zoom level', value);
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                onZoom={handleEditorZoom}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            v-on:pintura:zoom="handleEditorZoom($event)"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),
        };
    },

    methods: {
        handleEditorZoom: function (value) {
            console.log('zoom level', value);
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const handleEditorZoom = (event) => {
        const value = event.detail;

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

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        on:zoom={handleEditorZoom}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    handleEditorZoom(value: any): void {
        console.log('zoom level', value);
    }
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    (zoom)="handleEditorZoom($event)"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({ src: 'image.jpeg' });

        editor.on('pintura:zoom', function (event) {
            const value = event.detail;

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

pan

Fired when user pans image.

index.html

<!DOCTYPE html>

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

<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>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const handleEditorPan = (translation) => {
        console.log('translation', translation);
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                onPan={handleEditorPan}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            v-on:pintura:pan="handleEditorPan($event)"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),
        };
    },

    methods: {
        handleEditorPan: function (translation) {
            console.log('translation', translation);
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const handleEditorPan = (event) => {
        const translation = event.detail;

        console.log('translation', translation);
    };
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        on:pan={handleEditorPan}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    handleEditorPan(translation: any): void {
        console.log('translation', translation);
    }
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    (pan)="handleEditorPan($event)"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({ src: 'image.jpeg' });

        editor.on('pintura:pan', function (event) {
            const translation = event.detail;

            console.log('translation', translation);
        });
    });
</script>