vue3 集成 tinymce 及自定义皮肤

【Vue 集成 TinyMCE 官方指南】

一、安装 tinymce-vue 包

npm install --save "@tinymce/tinymce-vue"

二、 使用 Tiny Cloud 或通过自托管 TinyMCE 来提供对 TinyMCE 的访问。

2.1 通过 Tiny Cloud 访问 TinyMCE(非最优解)

在 editor 元素中用 api-key 选项赋上你的 Tiny Cloud API key。

比如： 下面是我们自定义的一个公共组件src/components/TinymceEditor/index.vue

2.2 TinyMCE 自托管

TinyMCE 可以通过以下方式自托管：

• 2.2.1 独立于 Vue.js 应用部署 TinyMCE
  （我们重点讲这个，请移步第三部分。）

要在创建 Vue.js 应用时对 TinyMCE 进行独立部署，可以将 tinymce 脚本添加到 HTML 文件(/项目跟目录/public/index.html)的 或 的末尾，like：

更多有关自托管 TinyMCE 的信息，请参阅：【Installing TinyMCE】。

• 2.2.2 使用模块打包器(如 Webpack、 Rollup.js、Browserify等)将 TinyMCE 与 Vue.js 应用打包在一起文档地址：【Usage with module loaders】。

三、独立部署 TinyMCE

3.1 下载自托管版本(离线版的) TinyMCE

https://www.tiny.cloud/get-tiny/self-hosted/

可以下载 Dev 版的

把下载完后的js目录下的tinymce文件夹整个复制到项目的public目录下

3.2 下载中文语言包

https://www.tiny.cloud/get-tiny/language-packages/

下载完把zh_CN.js文件放在项目/public/tinymce/langs/下面

3.3 使用@tinymce/tinymce-vue组件

public下的文件在开发过程中可以直接用/访问到，我们这边用tinymceScriptSrc去指定加载我们本地的tinymce.min.js

总结：反正最后静态资源也是要用 cdn 加速，还不如一整个自托管而不是部分去用官方的 cdn，不易维护、配置麻烦不说，体验也一般。