Event List
This section introduces the events of Umo Editor. Events allow you to monitor the complete lifecycle and state changes of Umo Editor for further operations. You can visit https://demo.umodoc.com/editor?pane=events&lang=en-US and open the console (DevTools › Console) to observe event triggers.
Example
<template>
<umo-editor
v-bind="options"
@before-create="onBeforeCreate"
@created="onCreated"
@changed="onChanged"
@changed:selection="onChangedSelection"
@changed:transaction="onChangedTransaction"
@changed:menu="onChangedMenu"
@changed:toolbar="onChangedToolbar"
@changed:page-size="onChangedPageSize"
@changed:page-orientation="onChangedPageOrientation"
@changed:page-margin="onChangedPageMargin"
@changed:page-background="onChangedPageBackground"
@changed:page-zoom="onChangedZoom"
@changed:page-show-toc="onChangedPageShowToc"
@changed:page-preview="onChangedPreview"
@changed:page-watermark="onChangedPageWatermark"
@changed:locale="onChangedLocale"
@changed:theme="onChangedTheme"
@content-error="onContentError"
@print="onPrint"
@focus="onFocus"
@blur="onBlur"
@saved="onSaved"
@destroy="onDestroy"
/>
</template>
<script setup>
import { ref } from 'vue';
import { UmoEditor } from '@umoteam/editor';
const options = ref({
// Configuration options
// ...
});
// Event handler functions go here ...
// Before creation lifecycle hook
const onBeforeCreate = () => {
console.log('onBeforeCreate', 'Editor is about to be created, no available parameters');
};
// Creation lifecycle hook
const onCreated = () => {
console.log('onCreated', 'Editor has been created, available parameters:', { editor });
};
// Content change hook
const onChanged = () => {
console.log('onChanged', 'Editor content has been updated, available parameters:', { editor });
};
// Selection change hook
const onChangedSelection = () => {
console.log('onChanged:selection', 'Selected content has changed, available parameters:', { editor });
};
// Transaction state change hook
const onChangedTransaction = () => {
console.log(
'onChanged:transaction',
'Editor state has changed, available parameters:', { editor, transaction }
);
};
// Menu status change hook
const onChangedMenu = (currentMenu) => {
console.log(
'onChanged:menu',
'Menu bar status has changed, available parameter: currentMenu, current menu is', currentMenu
);
};
// Toolbar info change hook
const onChangedToolbar = ({ toolbar, oldToolbar }) => {
console.log(
'onChanged:toolbar',
'Toolbar information has changed, available parameters:', { toolbar, oldToolbar }
);
};
// Page size change hook
const onChangedPageSize = ({ pageSize, oldPageSize }) => {
console.log(
'onChanged:pageSize',
'Page size information has changed, available parameters:', { pageSize, oldPageSize }
);
};
// Page orientation change hook
const onChangedPageOrientation = ({ pageOrientation, oldPageOrientation }) => {
console.log(
'onChanged:pageOrientation',
'Page orientation has changed, available parameters:', { pageOrientation, oldPageOrientation }
);
};
// Page margin change hook
const onChangedPageMargin = ({ pageMargin, oldPageMargin }) => {
console.log(
'onChanged:pageMargin',
'Page margin information has changed, available parameters:', { pageMargin, oldPageMargin }
);
};
// Page background change hook
const onChangedPageBackground = ({ pageBackground, oldPageBackground }) => {
console.log(
'onChanged:pageBackground',
'Page background has changed, available parameters:', { pageBackground, oldPageBackground }
);
};
// Zoom level change hook
const onChangedZoom = ({ zoomLevel, oldZoomLevel }) => {
console.log(
'onChanged:pageZoom',
'Page zoom level has changed, available parameters:', { zoomLevel, oldZoomLevel }
);
};
// Show table of contents change hook
const onChangedPageShowToc = (showToc) => {
console.log(
'onChanged:pageShowToc',
'Page TOC panel display status has changed, available parameters:', showToc
);
};
// Preview mode change hook
const onChangedPreview = (enabled) => {
console.log(
'onChanged:pagePreview',
'Page preview mode has changed, available parameters:', enabled
);
};
// Page watermark change hook
const onChangedPageWatermark = ({ pageWatermark, oldPageWatermark }) => {
console.log(
'onChanged:pageWatermark',
'Page watermark information has changed, available parameters:', { pageWatermark, oldPageWatermark }
);
};
// Locale setting change hook
const onChangedLocale = ({ locale, oldLocale }) => {
console.log(
'onChanged:locale',
'Language setting has changed, available parameters:', { locale, oldLocale }
);
};
// Theme setting change hook
const onChangedTheme = (theme) => {
console.log('onChanged:theme', 'Theme setting has changed, available parameters:', theme);
};
// Content parsing error hook
const onContentError = ({ editor, error, disableCollaboration }) => {
console.log(
'onContentError',
'Document content parsing error, available parameters:', { editor, error, disableCollaboration }
)
}
// Print event hook
const onPrint = () => {
console.log('onPrint', 'Editor gains focus, no available parameters');
};
// Focus event hook
const onFocus = () => {
console.log('onFocus', 'Editor gains focus, available parameters:', { editor, event });
};
// Blur event hook
const onBlur = () => {
console.log('onBlur', 'Editor loses focus, available parameters:', { editor, event });
};
// Save event hook
const onSaved = () => {
console.log('onSaved', 'Document has been saved, no available parameters');
};
// Destruction lifecycle hook
const onDestroy = () => {
console.log('onDestroy', 'Editor component has been destroyed, no available parameters');
};
</script>
Event Descriptions
Event Name | Trigger Timing / Description | Available Parameters |
---|---|---|
beforeCreate | The editor is about to be created | - |
created | The editor has been created | { editor } |
changed | The editor content has been updated | { editor } |
changed:selection | The selected content has changed | { editor } |
changed:transaction | The editor state has changed | { editor, transaction } |
changed:menu | The menu state has changed | currentMenu |
changed:toolbar | Toolbar information has changed | { toolbar, oldToolbar } |
changed:pageSize | Page size information has changed | { pageSize, oldPageSize } |
changed:pageOrientation | Page orientation has changed | { pageOrientation, oldPageOrientation } |
changed:pageMargin | Page margin information has changed | { pageMargin, oldPageMargin } |
changed:pageBackground | Page background has changed | { pageBackground, oldPageBackground } |
changed:pageZoom | Page zoom level has changed | { zoomLevel, oldZoomLevel } |
changed:pageShowToc | The visibility of the page outline panel has changed | showToc |
changed:pagePreview | Page preview mode has changed | enabled |
changed:pageWatermark | Page watermark information has changed | { pageWatermark, oldPageWatermark } |
changed:locale | Language settings have changed v2.0.0 | { locale, oldLocale } |
changed:theme | Theme settings have changed v2.1.0 | theme |
content-error | Document content parsing error v2.3.0 | { editor, error, disableCollaboration } |
Page printing v1.1.0 | - | |
focus | The editor has gained focus | { editor, event } |
blur | The editor has lost focus | { editor, event } |
saved | The document has been saved | - |
destroy | The editor component has been destroyed | - |