MiniMCE
可离线使用的 TinyMCE Vue 封装。
是的,TinyMCE 已经有官方的 Vue 封装 tinymce-vue 了,但它:
- 需要通过网络加载资源,外网会很慢,甚至超时
- 用不同的版本号来支持不同的 Vue 版本,升级 / 切换成本较高
- 默认功能最小化,需要繁杂的配置,且没有中文文档
- 只读模式和禁用模式没区别,没有真正意义上的只读模式
- 不支持全局参数(需要配置自定义插件时,全局参数会很有用)
于是,MiniMCE 诞生了 🎉
特性
- 基于 TinyMCE 6(2022 最新版)
- 可离线使用,无网络延迟
- Vue 2 & Vue 3 通用
- 默认开启插件全家桶,功能全面
- 提供常用自定义插件示例
- 插入 Word 文档(.docx),兼容 Microsoft Office、WPS
- 插入本地图片
- 插入本地视频
- 插入本地音频
- 插入电话链接
- 插入小程序页面链接
- 支持浅色模式 & 深色模式,主题、图标、内容样式均可自定义
- 提供只读模式(与禁用模式不同)
- 全局或局部引入,参数支持全局或局部配置(vue-global-config 提供技术支持)
安装
Vue 3
npm add minimce tinymce
全局引入
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/themes/silver'
import 'tinymce/icons/default'
import 'minimce/dist/style.css'
import MiniMCE from 'minimce'
app.use(MiniMCE, {
})
局部引入
<template>
<MiniMCE v-bind="{/* 局部配置 */}"/>
</template>
<script setup>
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/themes/silver'
import 'tinymce/icons/default'
import 'minimce/dist/style.css'
import MiniMCE from 'minimce'
</script>
完整示例代码
Vue 2
npm add minimce tinymce @vue/composition-api
全局引入
import VCA from '@vue/composition-api'
Vue.use(VCA)
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/themes/silver'
import 'tinymce/icons/default'
import 'minimce/dist/style.css'
import MiniMCE from 'minimce'
Vue.use(MiniMCE, {
})
局部引入
<template>
<MiniMCE v-bind="{/* 局部配置 */}"/>
</template>
<script>
import VCA from '@vue/composition-api'
Vue.use(VCA)
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/themes/silver'
import 'tinymce/icons/default'
import 'minimce/dist/style.css'
import MiniMCE from 'minimce'
export default {
components: { MiniMCE },
}
</script>
完整示例代码
参数
参数配置规则
- 双向绑定参数(
v-model
/ modelValue
/ value
)仅支持局部配置 - 其余参数均支持全局或局部配置
权重:
- 局部配置高于全局配置
- 对于对象类型的参数,局部配置会与全局配置进行合并,同名属性会被局部配置覆盖
内容样式
富文本的内容样式建议在展示侧自行添加,而不是在富文本的生产侧添加,因为:
- 富文本的生产侧无法满足各展示侧的定制化需求
- 展示侧可能包含小程序,小程序不支持
style
标签
插件示例
插入 Word 文档(.docx),兼容 Microsoft Office、WPS
插入本地图片
插入本地视频
插入本地音频
插入电话链接
插入小程序页面链接
粘贴 Word 文档
TinyMCE 提供了 premium 插件 PowerPaste,可用于粘贴 Word 文档,但兼容性一般,尤其是不支持 WPS
MiniMCE 提供了插入 Word 文档的插件示例,兼容 Microsoft Office、WPS,可在一定程度上替代 PowerPaste
注意:粘贴可以片段粘贴,插入只能整个文档插入
PowerPaste 插件
import MiniMCE from 'minimce'
import axios from 'axios'
import createAxiosShortcut from 'axios-shortcut'
const { POST } = createAxiosShortcut(axios)
app.use(MiniMCE, {
options: {
images_upload_handler (blobInfo, success, failure) {
const blob = blobInfo.blob()
const file = new File(
[blob],
blobInfo.filename(),
{ type: blob.type }
)
POST.upload(process.env.VUE_APP_UPLOAD_API, {
file
}).then(res => {
if (typeof res.data?.data === 'string') {
success(res.data.data)
} else {
failure(res.data?.message)
}
}).catch(err => {
failure(String(err))
})
},
}
})
-
兼容性
-
受浏览器限制,PowerPaste 插件无法支持微软 Word 和 Excel 文档所支持的所有图片类型
。举个例子,浏览器禁止以编程方式访问文件系统,所以无法解析文档中使用 file://
协议的图片(WPS 使用的就是此协议)。
-
粘贴微软 Word 文档(Windows 系统、≥ 2013 版本)中受保护视图的内容,将仅得到无格式的普通文本,这是受保护视图与剪贴板的交互机制决定的。
-
受微软 Excel 网页版限制,粘贴微软 Excel 网页版的内容将仅得到无格式的普通文本。
粘贴网页内容(HTML)
格式
粘贴的网页内容默认会保留一定的源格式, 启用 PowerPaste
插件后,对格式的处理将会更加完善。详见 https://www.tiny.cloud/docs/enterprise/system-requirements/#improvedhtmlcleaning
如需获取纯文本,选中编辑-粘贴为文本再进行粘贴
清除格式按钮得到的不是纯文本,可以自定义清除效果:
https://www.tiny.cloud/docs/configure/content-formatting/#removingaformat
图片
如果用户复制第三方网站的内容到编辑框内,静态资源(如图片)可能无法正常显示,这是因为:
-
第三方网站没有开启静态资源的跨域访问
-
第三方网站对静态资源做了 referrer 校验
TinyMCE 的 urlconverter_callback
、paste_postprocess
API 不支持异步操作,所以批量转存图片可行性低
技术上是可以解决的,可以通过 nginx 动态代理配合这两个 API 来处理
请自行评估相关风险