# Editor events A list of events which we can use to respond to the editor interface state. * [Editor Events](#editor-events) * [Modal Events](#modal-events) ## Editor Events These are the events fired by the editor instance. | Name | Description | | --------------------------------- | --------------------------------------------------------------------------------------------- | | ['init'](#init) | Fired when the editor instance is initialised. | | ['ready'](#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'](#close) | Fired when the editor is closed with the close button. | | ['selectutil'](#selectutil) | Fired when an editor util is selected. | | ['selectcontrol'](#selectcontrol) | Fired when a control in the editor is selected, currently only fires for markup editor tools. | | ['pan'](#pan) | Fired when user pans the image. | | ['zoom'](#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. ## Modal events Instances created with the [openEditor](../exports/#openeditor) JavaScript API fire a couple additional events. | Name | Description | | --------------- | ------------------------------- | | ['show'](#show) | Fired when the modal is shown. | | ['hide'](#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. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-0) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-0) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-0) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-0) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-0) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-0) * [index.html](#index-html-panel-0) ```html

``` * [App.jsx](#App-jsx-panel-0) * [App.css](#App-css-panel-0) ```jsx 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 (

); } export default App; ``` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-0) ```html ``` * [App.svelte](#App-svelte-panel-0) ```svelte

``` * [app.component.ts](#app-component-ts-panel-0) * [app.component.html](#app-component-html-panel-0) * [app.component.css](#app-component-css-panel-0) * [app.module.ts](#app-module-ts-panel-0) ```javascript 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); } } ``` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-0) ```html

``` ## pan Fired when user pans image. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-1) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-1) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-1) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-1) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-1) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-1) * [index.html](#index-html-panel-1) ```html

``` * [App.jsx](#App-jsx-panel-1) * [App.css](#App-css-panel-1) ```jsx 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 (

); } export default App; ``` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-1) ```html ``` * [App.svelte](#App-svelte-panel-1) ```svelte

``` * [app.component.ts](#app-component-ts-panel-1) * [app.component.html](#app-component-html-panel-1) * [app.component.css](#app-component-css-panel-1) * [app.module.ts](#app-module-ts-panel-1) ```javascript 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); } } ``` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-1) ```html

```