RichEditor 富文本

独立包 @rd-element/editor 的 RdRichEditor：TinyMCE 5.10.x 封装。 组件不打包 TinyMCE；业务需自行在页面加载 window.tinymce。 图片上传与快捷短语数据由回调注入（对齐 RdFileUpload「组件不发 HTTP」）。

前置条件

pnpm add @rd-element/editor

在 index.html（或等价入口）加载 TinyMCE 5.10.x，并准备 skins / themes / plugins / langs：

<script src="/static/tinymce/tinymce.min.js"></script>

文档站演示使用 jsDelivr CDN；生产建议与现网一样托管静态资源。

另需：

import '@rd-element/editor/dist/style.css'

基础用法

v-model 绑定 HTML；图片上传走 images-upload-handler。

<script setup lang="ts">
import { ref } from 'vue'
import { RdRichEditor } from '@rd-element/editor'

const html = ref('<p>Hello</p>')

async function uploadImage(blob: Blob) {
  // 业务自行上传，返回公网 URL
  const fd = new FormData()
  fd.append('file', blob)
  // const res = await fileUpload(fd)
  // return res.data.file.full_url
  return URL.createObjectURL(blob)
}
</script>

<template>
  <RdRichEditor
    v-model="html"
    :min_height="320"
    :images-upload-handler="uploadImage"
  />
</template>

底部栏插槽

邮件模板 / 签名等业务操作放在 #footer-bar，不进组件库。

<script setup lang="ts">
import { ref } from 'vue'
import { RdRichEditor } from '@rd-element/editor'

const html = ref('')
</script>

<template>
  <RdRichEditor v-model="html" :min_height="280">
    <template #footer-bar>
      <span class="pointer">邮件模板</span>
      <span>|</span>
      <span>签名</span>
    </template>
  </RdRichEditor>
</template>

快捷短语

text-phrase + fetch-text-phrases：输入 # 触发补全。数据由业务接口提供。

API

Attributes

属性名	说明	类型	默认值
v-model	HTML 内容	string	''
plugins	TinyMCE plugins（覆盖默认）	string | string[]	内置默认集
language	语言包名；zh-cn 会归一为 zh_CN	string	zh_CN
languageUrl	language_url；CDN 场景下需指向语言包 JS	string	—
menubar	菜单栏	string | string[]	file edit view…
toolbar	工具栏（TinyMCE 5 命名）	string | string[]	undo redo | styleselect…
toolbar_mode	工具栏换行模式	string	wrap
min_height	编辑区最小高度	number	480
height	固定高度	number	—
includes	在默认 plugins/menubar/toolbar 上追加 token	object	—
excludes	从默认 plugins/menubar/toolbar 移除 token	object	—
imagesUploadHandler	图片上传钩子，返回可访问 URL；未传则粘贴/插入图片失败	(blob: Blob) => Promise<string>	—
textPhrase	开启 # 快捷短语（需 fetchTextPhrases）	boolean	false
fetchTextPhrases	拉取快捷短语列表	() => Promise<TextPhraseItem[]>	—
tinymceBaseUrl	覆盖 TinyMCE baseURL / base_url	string	—

Events

事件名	说明	类型
update:modelValue	内容变更	(value: string) => void
change	编辑器 change	(value: string, e: unknown) => void
input	编辑器 input	(e: Event) => void

Slots

插槽名	说明
footer-bar	编辑器底部栏（初始化后渲染）

Exposes

方法	说明	类型
getEditor	获取 TinyMCE 实例（未初始化时返回 Promise）	() => Editor | Promise
getContent	获取 HTML	() => string | Promise
setContent	设置 HTML	(html: string) => …
insertContent	插入 HTML	(html: string) => …
validate	是否有有效内容（文本 / 锚点 / 图 / 表）	() => boolean