@mteditor/vue2

@mteditor/vue2

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

安装

npm i @mteditor/vue2

import '@mteditor/theme-default/index.css'

@mteditor/core 由本包作为普通依赖带进来。peer 依赖为 vue: >=2.7.0 <3.0.0 （Vue 2.7 是末版，且内置 Composition API）。

用法

<template>
  <mt-editor v-model="doc" :options="options" @change="onChange" @error="onError" />
</template>

<script>
import { MtEditor } from '@mteditor/vue2'
import '@mteditor/theme-default/index.css'

export default {
  components: { MtEditor },
  data() {
    return { doc: null, options: { placeholder: '请输入…', theme: 'light' } }
  },
  methods: {
    onChange(payload) {
      /* v-model 已经写了 doc，这里只是额外关心一次事件 */
    },
    onError(payload) {
      console.error(payload.code, payload.message)
    },
  },
}
</script>

按 Options API 书写，用 Vue.extend，只写 Options API 的老项目里接入方式与手写组件没有区别。

v-model 双兼容

Vue 2 的 v-model 编译产物是 props.value + on.input；Vue 2.7 起也支持 modelValue + update:modelValue。本组件两个 prop 都收、两个事件都发：

两者同时给出时 modelValue 优先。input 与 update:modelValue 总是同时派发 —— 换一种写法不会「少一半事件」，宿主也不必猜自己在走哪条协议。

null 与 undefined 都算「没给」：data() { return { doc: null } } 是 Vue 2 里最常见的 「还没加载」写法，此时会回落到 options.content，且不会把 null 写进编辑器。

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') 订阅 —— 后者永远收不到。

通过模板 ref 拿到内核实例

<mt-editor ref="ed" v-model="doc" />

const handle = this.$refs.ed as unknown as MtEditorVue2Handle
handle.editor?.command('focus')

适配层只暴露 editor 一个字段，不把内核方法再转发一遍。卸载后该字段为 null。

注意事项

• 不要自己写回声抑制。「灌回来的是同一份内容就不该碰视图」这条判据在内核 （setDocument() 的结构等价短路）。
• 不要用重建实例来「同步内容」。重建会丢选区、撤销栈与 IME composition 状态。
• 浮层（气泡 / 下拉 / 抽屉）挂在 document.body 上，不在组件容器内。

许可

MIT