DocumentionEvents

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 NameTrigger Timing / DescriptionAvailable Parameters
beforeCreateThe editor is about to be created-
createdThe editor has been created{ editor }
changedThe editor content has been updated{ editor }
changed:selectionThe selected content has changed{ editor }
changed:transactionThe editor state has changed{ editor, transaction }
changed:menuThe menu state has changedcurrentMenu
changed:toolbarToolbar information has changed{ toolbar, oldToolbar }
changed:pageSizePage size information has changed{ pageSize, oldPageSize }
changed:pageOrientationPage orientation has changed{ pageOrientation, oldPageOrientation }
changed:pageMarginPage margin information has changed{ pageMargin, oldPageMargin }
changed:pageBackgroundPage background has changed{ pageBackground, oldPageBackground }
changed:pageZoomPage zoom level has changed{ zoomLevel, oldZoomLevel }
changed:pageShowTocThe visibility of the page outline panel has changedshowToc
changed:pagePreviewPage preview mode has changedenabled
changed:pageWatermarkPage watermark information has changed{ pageWatermark, oldPageWatermark }
changed:localeLanguage settings have changed v2.0.0{ locale, oldLocale }
changed:themeTheme settings have changed v2.1.0theme
content-errorDocument content parsing error v2.3.0{ editor, error, disableCollaboration }
printPage printing v1.1.0-
focusThe editor has gained focus{ editor, event }
blurThe editor has lost focus{ editor, event }
savedThe document has been saved-
destroyThe editor component has been destroyed-