开发文档Umo Editor Mobile事件列表

事件列表

与 Umo Editor / Umo Editor Next 相比,移动端更关注页面状态、阅读态/编辑态切换和面板显示状态,不提供桌面端的全部事件集合。

示例

<template>
  <umo-editor
    v-bind="options"
    @before-create="onBeforeCreate"
    @created="onCreated"
    @changed="onChanged"
    @changed:selection="onChangedSelection"
    @changed:transaction="onChangedTransaction"
    @changed:page-layout="onChangedPageLayout"
    @changed:page-size="onChangedPageSize"
    @changed:page-orientation="onChangedPageOrientation"
    @changed:page-margin="onChangedPageMargin"
    @changed:page-background="onChangedPageBackground"
    @changed:page-watermark="onChangedPageWatermark"
    @changed:locale="onChangedLocale"
    @changed:theme="onChangedTheme"
    @changed:edit-mode="onChangedEditMode"
    @changed:search-visible="onChangedSearchVisible"
    @changed:toc-visible="onChangedTocVisible"
    @changed:more-visible="onChangedMoreVisible"
    @focus="onFocus"
    @blur="onBlur"
    @saved="onSaved"
    @destroy="onDestroy"
  />
</template>
 
<script setup>
import { ref } from 'vue'
import UmoEditor from '@umoteam/editor-mobile'
 
const options = ref({
  async onSave() {
    return '保存成功'
  },
})
 
const onBeforeCreate = (editor) => {
  console.log('beforeCreate', editor)
}
const onCreated = (editor) => {
  console.log('created', editor)
}
const onChanged = () => {
  console.log('changed')
}
const onChangedSelection = (payload) => {
  console.log('changed:selection', payload)
}
const onChangedTransaction = (payload) => {
  console.log('changed:transaction', payload)
}
const onChangedPageLayout = (layout) => {
  console.log('changed:pageLayout', layout)
}
const onChangedPageSize = (size) => {
  console.log('changed:pageSize', size)
}
const onChangedPageOrientation = (orientation) => {
  console.log('changed:pageOrientation', orientation)
}
const onChangedPageMargin = (margin) => {
  console.log('changed:pageMargin', margin)
}
const onChangedPageBackground = (background) => {
  console.log('changed:pageBackground', background)
}
const onChangedPageWatermark = (watermark) => {
  console.log('changed:pageWatermark', watermark)
}
const onChangedLocale = (locale) => {
  console.log('changed:locale', locale)
}
const onChangedTheme = (theme) => {
  console.log('changed:theme', theme)
}
const onChangedEditMode = (value) => {
  console.log('changed:editMode', value)
}
const onChangedSearchVisible = (value) => {
  console.log('changed:searchVisible', value)
}
const onChangedTocVisible = (value) => {
  console.log('changed:tocVisible', value)
}
const onChangedMoreVisible = (value) => {
  console.log('changed:moreVisible', value)
}
const onFocus = () => {
  console.log('focus')
}
const onBlur = () => {
  console.log('blur')
}
const onSaved = () => {
  console.log('saved')
}
const onDestroy = () => {
  console.log('destroy')
}
</script>

事件说明

事件名称触发时机 / 说明可用参数
beforeCreate编辑器实例创建完成后、created 之前触发。当前会直接把编辑器实例作为参数抛出。editor
created编辑器准备完成后触发。editor
changed编辑器内容更新时触发。-
changed:selection选区变化时触发。payload,即 Tiptap selectionUpdate 的原始参数
changed:transaction事务变化时触发。payload,即 Tiptap transaction 的原始参数
changed:pageLayout页面布局切换时触发。layout
changed:pageSize页面尺寸变化时触发。size
changed:pageOrientation页面方向变化时触发。orientation
changed:pageMargin页面边距变化时触发。margin
changed:pageBackground页面背景变化时触发。background
changed:pageWatermark页面水印变化时触发。watermark
changed:locale语言切换时触发。当前仅返回新语言值。移动端不同locale
changed:theme主题切换时触发。theme
changed:editMode阅读态与编辑态切换时触发。 移动端特有boolean
changed:searchVisible搜索面板显示状态变化时触发。 移动端特有boolean
changed:tocVisible目录面板显示状态变化时触发。 移动端特有boolean
changed:moreVisible更多面板显示状态变化时触发。 移动端特有boolean
focus编辑器获得焦点时触发。-
blur编辑器失去焦点时触发。-
saved保存成功后触发。-
destroy组件销毁前触发。-

桌面端事件对比

以下事件在桌面端文档中存在,但移动端当前未对外暴露:

  • changed:menu 不支持
  • changed:toolbar 不支持
  • changed:pageZoom 不支持
  • changed:pageShowToc 不支持
  • changed:pagePreview 不支持
  • paste 不支持
  • drop 不支持
  • delete 不支持
  • print 不支持