Events

<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 'Saved successfully'
  },
})
 
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>