事件列表

<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({
  // 配置项
  // ...
})
 
const onBeforeCreate = () => {
  console.log('onBeforeCreate', '编辑器即将创建，无可用参数')
}
const onCreated = () => {
  console.log('onCreated', '编辑器已创建，可用参数:', { editor })
}
const onChanged = () => {
  console.log('onChanged', '编辑器内容已更新，可用参数:', { editor })
}
const onChangedSelection = () => {
  console.log('onChanged:selection', '所选内容已发生变化，可用参数:', {
    editor,
  })
}
const onChangedTransaction = () => {
  console.log('onChanged:transaction', '编辑器状态已发生变化，可用参数:', {
    editor,
    transaction,
  })
}
const onChangedMenu = (currentMenu) => {
  console.log(
    'onChanged:menu',
    '菜单栏状态发生变化，可用参数: currentMenu，当前菜单为',
    currentMenu
  )
}
const onChangedToolbar = ({ toolbar, oldToolbar }) => {
  console.log('onChanged:toolbar', '工具栏信息发生变化，可用参数:', {
    toolbar,
    oldToolbar,
  })
}
const onChangedPageLayout = ({ pageLayout, oldPageLayout }) => {
  console.log('onChanged:pageLayout', '页面布局发生变化，可用参数:', {
    pageLayout,
    oldPageLayout,
  })
}
const onChangedPageSize = ({ pageSize, oldPageSize }) => {
  console.log('onChanged:pageSize', '页面大小信息发生变化，可用参数:', {
    pageSize,
    oldPageSize,
  })
}
const onChangedPageOrientation = ({ pageOrientation, oldPageOrientation }) => {
  console.log('onChanged:pageOrientation', '页面方向发生变化，可用参数:', {
    pageOrientation,
    oldPageOrientation,
  })
}
const onChangedPageMargin = ({ pageMargin, oldPageMargin }) => {
  console.log('onChanged:pageMargin', '页面边距信息发生变化，可用参数:', {
    pageMargin,
    oldPageMargin,
  })
}
const onChangedPageBackground = ({ pageBackground, oldPageBackground }) => {
  console.log('onChanged:pageBackground', '页面背景发生变化，可用参数:', {
    pageBackground,
    oldPageBackground,
  })
}
const onChangedZoom = ({ zoomLevel, oldZoomLevel }) => {
  console.log('onChanged:pageZoom', '页面缩放比例发生变化，可用参数:', {
    zoomLevel,
    oldZoomLevel,
  })
}
const onChangedPageShowToc = (showToc) => {
  console.log(
    'onChanged:pageShowToc',
    '页面大纲面板显示状态发生变化，可用参数:',
    showToc
  )
}
const onChangedpreview = (enabled) => {
  console.log(
    'onChanged:pagePreview',
    '页面预览模式发生变化，可用参数:',
    enabled
  )
}
const onChangedPageWatermark = ({ pageWatermark, oldPageWatermark }) => {
  console.log('onChanged:pageWatermark', '页面水印信息发生变化，可用参数:', {
    pageWatermark,
    oldPageWatermark,
  })
}
const onChangedLocale = ({ locale, oldLocale }) => {
  console.log('onChanged:locale', '语言设置发生变化，可用参数:', {
    locale,
    oldLocale,
  })
}
const onChangedTheme = (theme) => {
  console.log('onChanged:theme', '主题设置发生变化，可用参数:', theme)
}
const onPaste = (content) => {
  console.log('onPaste', '粘贴了新内容，可用参数:', { event, slice })
}
const onDrop = (content) => {
  console.log('onDrop', '内容被拖动，可用参数:', { event, slice, moved })
}
const onDelete = (content) => {
  console.log('onDelete', '删除了内容，可用参数:', {
    type,
    deletedRange,
    newRange,
    partial,
    node,
    mark,
    from,
    to,
    newFrom,
    newTo,
  })
}
const onPrint = () => {
  console.log('onPrint', '打印页面，无可用参数')
}
const onFocus = () => {
  console.log('onFocus', '编辑器获得焦点，可用参数:', { editor, event })
}
const onBlur = () => {
  console.log('onBlur', '编辑器失去焦点，可用参数:', { editor, event })
}
const onSaved = () => {
  console.log('onSaved', '文档已保存，无可用参数')
}
const onDestroy = () => {
  console.log('onDestroy', '编辑器组件已销毁，无可用参数')
}
</script>