Event List

<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-layout="onChangedPageLayout"
    @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"
    @paste="onPaste"
    @drop="onDrop"
    @delete="onDelete"
    @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 layout change hook
const onChangedPageLayout = ({ pageLayout, oldPageLayout }) => {
  console.log(
    'onChanged:pageLayout',
    'Page layout has changed, available parameters:',
    { pageLayout, oldPageLayout }
  )
}
 
// 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 paste hook
const onPaste = (content) => {
  console.log(
    'onPaste',
    'The content is pasted into the editor., available parameters:',
    { event, slice }
  )
}
 
// Content drop hook
const onDrop = (content) => {
  console.log(
    'onDrop',
    'The content is dropped into the editor, available parameters:',
    { event, slice, moved }
  )
}
 
// Content delete hook
const onDelete = (content) => {
  console.log(
    'onDelete',
    'content is deleted from the editor. available parameters:',
    {
      type,
      deletedRange,
      newRange,
      partial,
      node,
      mark,
      from,
      to,
      newFrom,
      newTo,
    }
  )
}
 
// Print event hook
const onPrint = () => {
  console.log('onPrint', 'Printing page, 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>