方法列表

本节介绍 Easy Editor 的方法，通过 Easy Editor 提供的方法，可以对 Easy Editor 进行一些常规操作。

示例

<template>
  <easy-editor
    ref="editorRef"
    v-bind="options"
  />
  <button @click="getOptions">获取配置</button>
</template>
<script setup>
  import { ref } from 'vue';
  importfrom;
  const editorRef = ref(null);
  const options = ref({
    // 配置项
    // ...
  })
  const getOptions = () => {
    const options = editorRef.value.getOptions();
    console.log(options);
  }
</script>

方法说明

getOptions

说明：获取 Easy Editor 的配置。

参数：无

返回值：Object，包含，包含 Easy Editor 的配置。

setOptions

说明：设置 Easy Editor 的配置。

参数：Object，包含 Easy Editor 的配置。

返回值：Object，包含，包含 Easy Editor 的配置。

setToolbar

说明：设置 Easy Editor 的工具栏类型。

参数：{ mode, show }

• mode：String，工具栏类型，可选值为 ribbon、classic。
• show：Boolean，是否显示工具栏。

返回值：无。

setLayout

说明：设置 Easy Editor 的布局信息，可设为页面视图或者 Web 视图，设置为某种布局时，需要pages.layouts中包含该布局，否则设置不成功。

参数：page 或 web。

返回值：无。

setPage

说明：设置 Easy Editor 的页面信息。

参数：Object，包含要设置的页面信息。

• size：String，页面大小，应为 dicts.pageSizes 中提供的 label 值，如 A4。
• orientation：String，页面方向，可选值为 portrait、landscape。
• background：String，页面背景，合法的CSS 颜色值。
• layout：String，页面布局，可选值为 page、web。

返回值：无。

说明：设置 Easy Editor 的水印信息。

参数：Object，包含要设置的水印信息。

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

返回值：无。

setDocument

说明：设置 Easy Editor 的文档信息。

参数：Object，包含要设置的文档信息。

• title: String，文档标题。
• bubbleMenu: Boolean，是否启用气泡菜单。
• blockMenu: Boolean，是否启用块级菜单。
• markdown: Boolean，是否启用 Markdown 语法。
• spellcheck: Boolean，是否启用浏览器拼写检查。

返回值：无。

setContent

说明：设置 Easy Editor 的内容。

参数：

• content : 合法的 HTML 格式或其他合法的Tiptap 文档格式。
• options : // v2.2.0 新增
  • emitUpdate: true，是否触发更新事件。
  • focusPosition: focus 位置，可选值为：‘start’ | ‘end’ | ‘all’ | number | boolean | null (false)。
  • focusOptions: { scrollIntoView: true }。

返回值：无。

说明：在当前选中文本位置插入内容。 v6.0.0 新增

参数：

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

返回值：无。

setLocale

说明：设置 Easy Editor 的显示语言。 v2.0.0 新增

参数：zh-CN 或 en-US。

返回值：无。

setTheme

说明：设置 Easy Editor 的主题。 v2.1.0 新增

参数：light 、 dark 、 auto。

返回值：无。

getPage

说明：获取 Easy Editor 的页面配置信息。 v5.0.0 新增

参数：无。

返回值：页面配置信息。

setPage

说明：设置 Easy Editor 的页面配置信息。 v5.0.0 新增

参数：Object，包含要设置的页面信息。

• size：String，页面大小，应为 dicts.pageSizes 中提供的 label 值，如 A4。
• orientation：String，页面方向，可选值为 portrait、landscape。
• background：String，页面背景，合法的CSS 颜色值。
• layout：String，页面布局，必须是 options.page.layouts 中的一个值。

返回值：无。

getContent

说明：获取 Easy Editor 的内容。

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

返回值：html、json、text。

getContentExcerpt

说明：获取 Easy Editor 的内容摘要。

参数：

• charLimit：Number，摘要长度，默认为 100 个字符。
• more：String，摘要结尾，默认为 …。

返回值：文档摘要。

getHTML

说明：获取 Easy Editor 的 HTML 内容。

参数：无。

返回值：html。

getJSON

说明：获取 Easy Editor 的 JSON 内容。

参数：无。

返回值：JSON。

getVanillaHTML

说明：获取 Easy Editor 的原生 HTML 内容，不包含外部 CSS，通常用于文档预览等场景。

参数：无。

返回值：html。

getText

说明：获取 Easy Editor 的文本内容。

参数：无。

返回值：文本。

getImage

说明：获取 Easy Editor 的页面截图。

参数：String，可选值为 blob、jpeg、png。

返回值：图片信息。

saveContent

说明：保存 Easy Editor 的内容。

参数： Boolean，是否显示保存成功的提示消息。

返回值：无。

getEditor

说明：获取 Editor 的 Vue 实例。

参数：无。

返回值：Tiptap Editor 的 Vue 实例。

useEditor

说明：获取 Editor 的实例。 v4.6.0 新增

参数：无。

返回值：Tiptap Editor 实例。

getTableOfContents

说明：获取页面大纲，更多页面大纲信息可以通过 getEditor() 获取编辑器实例后，editor.storage.tableOfContents 获取。 v3.0.0 新增

参数：无。

返回值：

[
  {
    dom: HTMLElement, // 当前锚点对应的HTML元素
// 编辑器实例
    id: String, // 节点 ID
    isActive: Boolean, // 当前锚点是否处于激活状态
    isScrolledOver: Boolean, // 这个锚点是否已经被滚动经过
    itemIndex: Number, // 在当前层级上的项目索引
    level: Number, // 项目的当前层级 - 这可能与实际的锚点层级不同，用于从高级到低级渲染层次结构
    node: Node, // 当前锚点对应的 ProseMirror 节点
    originalLevel: Number, // 实际层级
    pos: Number, // 锚点节点的位置
// 锚点的文本内容
  }
]

getSelectionText

说明：获取当前选中文字文字内容。 v3.0.0 新增

参数：无。

返回值：无

getSelectionNode

说明：获取当前选中节点信息，自 v6.0.0 版本开始，调整为获取当前选中的节点，而非当前选中节点的祖先节点（即文档节点的子节点）。 v3.0.0 新增

参数：无。

返回值：Tiptap Node。

setCurrentNodeSelection

说明：用于选中当前焦点所在位置的整个节点，例如光标在 table 中的单元格时，调用该方法会选中整个表格。 v3.1.0 新增

参数：无。

返回值：无。

说明：删除当前选中的节点，自 v6.0.0 版本开始，调整为删除当前选中的节点，而非当前选中节点的祖先节点（即文档节点的子节点）。 v3.0.0 新增

参数：无。

返回值：无

getLocale

说明：返回 Easy Editor 的显示语言。 v2.0.0 新增

参数：无。

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

getI18n

说明：返回vue-i18n实例。 v2.0.0 新增

参数：无。

返回值：vue-i18n。

setReadOnly

说明：设置 Easy Editor 的只读状态。

参数：Boolean，是否只读。

返回值：无。

print

说明：打印页面。 v1.1.0 新增

参数：无。

返回值：无。

focus

说明：使 Easy Editor 获取焦点。

参数：

• position : ‘start’ | ‘end’ | ‘all’ | number | boolean | null (false)
• options : { scrollIntoView: boolean } // v2.2.0 新增

返回值：无。

blur

说明：使 Easy Editor 失去焦点。

参数：无。

返回值：无。

toggleFullscreen

说明：切换 Easy Editor 的全屏状态（视口全屏，并非浏览器全屏）。v6.0.0 新增

参数：无。

返回值：无。

getAllBookmarks

说明：返回文档中的所有书签。v6.0.0 新增

参数：无。

返回值：Array，书签名称数组。

focusBookmark

说明：聚焦到指定的书签位置。v6.0.0 新增

参数：bookmarkName，String，书签名称。

返回值：Boolean，是否设置成功。

setBookmark

说明：设置书签。v6.0.0 新增

参数：bookmarkName，String，书签名称。

返回值：Boolean，是否设置成功。

说明：删除指定书签。v6.0.0 新增

参数：bookmarkName，String，书签名称。

返回值：Boolean，是否删除成功。

openAside

说明：根据右侧面板标识展开右侧面板。v6.0.0 新增

参数：key，String，右侧面板的唯一标识符。

返回值：无

closeAside

说明：根据右侧面板表示关闭右侧面板。v6.0.0 新增

参数：key，String，右侧面板的唯一标识符。

返回值：无

openAIChat

说明：打开右侧Chat聊天框。v6.0.0 新增

参数：无

返回值：无

closeAIChat

说明：关闭右侧Chat聊天框。v6.0.0 新增

参数：无

返回值：无

startTypewriter

说明：以打字机效果插入内容。v7.0.0 新增

参数：

• content : 合法的Tiptap JSON 文档格式。
• options :
  • speed: Number，打字机效果的间隔时间。
  • step: Number，打字机步长，每次打字的显示数量,为了效果，建议不超过10。
  • onComplete: function，打字机完成后的回调函数。

返回值：无。

说明：终止打字机插入内容效果。v7.0.0 新增

参数：无。

返回值：无。

getTypewriterState

说明：获取打字机的运行状态。v7.0.0 新增

参数：无。

返回值：

• isRunning : Boolean 当前打字机的运行状态 true表示正在运行，false 表示打字机已停止。
• currentParagraph : Number 当前打字机运行到的段落位置。
• currentTextNode : Number 当前打字机运行到的段落下的文本节点位置。
• currentChar : Number 当前打字机运行到段落下的字符位置。

useAlert

说明：使用 Easy Editor 的提示框。

参数：options，object，TDesign Next Dialog的相关配置。

返回值：TDesign Next Dialog 实例。

useConfirm

说明：使用 Easy Editor 的确认框。

参数：options，object，TDesign Next Dialog的相关配置。

返回值：TDesign Next Dialog 实例。

useMessage

说明：使用 Easy Editor 的消息提示。

参数：

• type：String，消息类型，可选值为 success、warning、error、info。
• options：TDesign Next Message的相关配置。

返回值：TDesign Next Message 实例。

更多方法

Easy Editor 基于Tiptap实现，更多 Tiptap 内部方法请查看Tiptap 编辑器相关API。