@mteditor/vue3

@mteditor/vue3

MtEditor 的 Vue 3 适配层 —— 薄壳，不含任何编辑逻辑。

安装

npm i @mteditor/vue3

// 样式是独立的包，且是纯 CSS（无 JS 入口），必须显式引入
import '@mteditor/theme-default/index.css'

@mteditor/core 由本包作为普通依赖带进来，不需要单独安装。

用法

<script setup lang="ts">
import { ref } from 'vue'
import { MtEditor } from '@mteditor/vue3'
import type { MtDocument } from '@mteditor/vue3'

const doc = ref<MtDocument | undefined>(undefined)
const html = ref('')
</script>

<template>
  <MtEditor v-model:modelValue="doc" v-model:html="html" :options="{ theme: 'light' }" />
</template>

Props

MtAdapterOptions = Omit<MtEditorOptions, 'element' | 'onChange' | 'onReady' | 'onError'>。 被摘掉的四个由组件自己接管；content 保留，语义收窄为「初始内容，挂载时读取一次」， 绑定值一旦给出就优先于它。

运行时可变的选项只有三个：theme / locale / readonly （内核分别为它们提供了 setTheme / setLocale / setReadonly）。 其余（platform / ui / placeholder / plugins / historyDepth / changeDebounce / selectionThrottle）挂载时读取一次，要换档请用 :key 重挂载。

事件

内核事件名原样透出，不改名也不合并。

ready 在内核的构造函数里就派发了，因此组件把它当构造选项（onReady）传入， 而不是事后 on('ready') 订阅 —— 后者永远收不到。也正因如此，onReady 是唯一 能直接拿到「刚建好的实例」的时机。

暴露的句柄

ref 拿到的是 MtEditorVue3Expose（即 { editor: MtEditorInstance | null }），卸载后为 null：

const ed = ref<MtEditorVue3Expose | null>(null)
ed.value?.editor?.command('focus')

适配层不转发内核方法（getJSON() / command() / undo() … 一律走 editor）， 取到 editor 后用法与原生完全一致。

注意事项

• 不要自己写回声抑制。宿主把编辑器刚给出的文档灌回来是 v-model 的必然结果； 「灌回来的是同一份内容就不该碰视图」这条判据在内核（结构等价短路）。
• 不要用重建实例来「同步内容」。重建会丢选区、撤销栈与 IME composition 状态。 切主题走 options.theme（组件内部调 setTheme，不重建）。
• 模板类型检查需要 vue-tsc，本包与示例都未引入；declare module '*.vue' 只解决「能 import」。
• 浮层（气泡 / 下拉 / 抽屉）挂在 document.body 上，不在组件容器内 —— 判断浮层是否打开别用「容器里有没有某元素」。

许可

MIT