方法列表

移动端尽量复用了 Umo Editor / Umo Editor Next 的方法命名，但并未一比一开放桌面端全部能力。

示例

<template>
  <umo-editor ref="editorRef" v-bind="options" />
  <button @click="save">保存</button>
</template>
 
<script setup>
import { ref } from 'vue'
import UmoEditor from '@umoteam/editor-mobile'
 
const editorRef = ref(null)
const options = ref({
  async onSave() {
    return '保存成功'
  },
})
 
const save = async () => {
  const result = await editorRef.value.saveContent(true)
  console.log(result)
}
</script>

方法说明

getOptions

说明：获取当前生效的配置对象。

参数：无

返回值：Object

setOptions

说明：合并并更新配置对象。

参数：Object

返回值：无。

setLayout

说明：设置当前布局，可设为页面视图或 Web 视图。

参数：'page' 或 'web'

返回值：无。

setWatermark

说明：更新页面水印配置。

参数：Object

• type: String，水印类型，可选值为：compact、spacious。
• alpha: Number，水印透明度，可选值为：0-1。
• fontColor: String，字体颜色，可选值为：合法的CSS 颜色值。
• fontSize: Number，字体大小，单位为 px。
• fontFamily: Number，字体，合法的CSS font-family值。
• fontWeight: Sring，字体粗细，可选值为：normal、bold、bolder。
• text: String，水印内容，建议不超过 30 个字符。

返回值：无。

setDocument

说明：更新 document 配置。

参数：Object

• 常见字段如：title、content、readOnly、placeholder、autoSave 等。
• 请优先使用对应 document.* 配置中的真实字段名，例如 enableBubbleMenu、enableBlockMenu、enableMarkdown、enableSpellcheck。移动端不同

返回值：无。

setContent

说明：整体替换编辑器内容。

参数：

• content：合法的 HTML 或其他合法的 Tiptap 文档格式。
• options：
  • emitUpdate: true，是否触发更新事件。
  • focusPosition: 光标聚焦位置，可选值为 'start' | 'end' | 'all' | number | boolean | null。
  • focusOptions: { scrollIntoView: true }。

返回值：无。

insertContent

说明：在当前选中文本位置插入内容。

参数：

• content：合法的 HTML 或其他合法的 Tiptap 文档格式。
• options：
  • updateSelection: true，是否更新选区。
  • focusPosition: 光标聚焦位置，可选值为 'start' | 'end' | 'all' | number | boolean | null。
  • focusOptions: { scrollIntoView: true }。

返回值：无。

setLocale

说明：设置显示语言。

参数：zh-CN 或 en-US。

返回值：无

当前语言切换通过刷新页面生效。

setTheme

说明：设置主题。

参数：light 、 dark 、 auto。

返回值：无。

getPage

说明：获取当前页面配置。

参数：无。

返回值：页面配置对象。

setPage

说明：更新页面配置。

参数：Object

• size：页面尺寸对象。
• orientation：页面方向，可选值为 portrait、landscape。
• background：String，页面背景，合法的CSS 颜色值。
• layout：String，页面布局，必须是 options.page.layouts 中的一个值。
• margin：Object，页面边距，包含 top、right、bottom、left 四个属性，单位是 厘米。

返回值：无。

getContent

说明：获取内容。

参数：String，可选值为 html、json、text。

返回值：html、json、text。

getHTML

说明：获取 HTML 内容。

参数：无。

返回值：html。

getJSON

说明：获取 JSON 内容。

参数：无。

返回值：JSON。

getText

说明：获取纯文本内容。

参数：无。

返回值：文本。

saveContent

说明：手动触发保存。

参数：Boolean，是否显示提示消息。

返回值：保存结果对象或字符串，具体取决于 onSave 的返回值。

getEditor

说明：获取内部编辑器的 ref。

参数：无。

返回值：编辑器 ref

如果您需要直接访问 Tiptap Editor 实例，通常应优先使用 useEditor()。

useEditor

说明：获取 Tiptap Editor 实例。

参数：无。

返回值：Tiptap Editor 实例。

getTableOfContents

说明：获取目录数据。

参数：无。

返回值：editor.storage.tableOfContents.content

getSelectionText

说明：获取当前选中文本。

参数：无。

返回值：String

getSelectionNode

说明：获取当前选中节点。

参数：无。

返回值：Tiptap Node。

setCurrentNodeSelection

说明：选中当前焦点所在的整个节点。

参数：无。

返回值：无。

deleteSelectionNode

说明：删除当前选中节点。

参数：无。

返回值：无

getLocale

说明：获取当前语言。

参数：无。

返回值：zh-CN 或 en-US。

getI18n

说明：获取 vue-i18n 实例。

参数：无。

返回值：vue-i18n。

setReadOnly

说明：设置只读状态。

参数：Boolean，是否只读。

返回值：无。

focus

说明：使编辑器获取焦点。

参数：

• position：'start' | 'end' | 'all' | number | boolean | null

返回值：无。

blur

说明：使编辑器失去焦点。

参数：无。

返回值：无。

reset

说明：清理编辑器相关本地缓存并刷新页面。

参数：silent?: boolean

返回值：无

destroy

说明：销毁编辑器实例。

参数：无

返回值：无

桌面端方法对比

以下方法在桌面端文档中存在，但移动端当前未对外暴露：

• setSkin 不支持
• getContentExcerpt 不支持
• getVanillaHTML 不支持
• getImage 不支持
• print 不支持
• toggleFullscreen 不支持
• getAllBookmarks / focusBookmark / setBookmark / deleteBookmark 不支持
• openAside / closeAside 不支持
• openAIChat / closeAIChat 不支持
• startTypewriter / stopTypewriter / getTypewriterState 不支持
• useAlert / useConfirm / useMessage 不支持

更多方法

Umo Editor Mobile 基于 Tiptap 实现，更多底层能力可结合 useEditor() 返回的实例继续调用。