vue3引用tinymce富文本

项目场景：

vue3项目中使用tinymce富文本插件

---

最终效果图

 

---

步骤：

• 第一步先安装tinymce集成好vue的包

tinymce官方文档：https://www.tiny.cloud/docs/tinymce/6/vue-cloud/

tinymce6版本的:

npm install --save "@tinymce/tinymce-vue@^5"
//or
yarn add  "@tinymce/tinymce-vue@^5"

 tinymce5版本的:

npm install --save "@tinymce/tinymce-vue@^4"
//or
yarn add  "@tinymce/tinymce-vue@^4"

---

 tinymce6和 tinymce5都可以兼容vue3,所以随便选择那个。

网上看到很多其他还需要单独再下载tinymce，然后，复制node_modules/tinymce目录下的文件到到public目录下，然后再开始引入并使用tinymce。其实不需要了，@tinymce/tinymce-vue这个包已经集成好了。

• 第二步下载中文安装包，汉化富文本组件

官网下载地址：Language Packages | Trusted Rich Text Editor | TinyMCE

 将下载好的文件放在public文件下，后面引入的时候好使用

• 第三步去官方申请key

（其实也可以不申请，如果不填有效key，会弹出提示，影响体验）

官方地址：My Account | Tiny Cloud

 如果有账号的就直接登录，没有账号的就要注册才能申请

领域白名单填写的时候，就填你将要使用tinymce的网站地址

 填好一系列的资料，按照官方步骤走就可以了拿到api key了，复制了等会儿要用

•  第三步在项目中使用：

 

总结：

只要按照上面的步骤基本上就能使用了，可以自己进行二次封装，这样使用起来更简明。

如果富文本需要更多更丰富的功能，可以根据自己的需求去配。

中文文档看起来更方便：TinyMCE中文文档中文手册

 如果在安装成功后，使用时报504（timeout getaway）这样的错，建议把整个node_modules删除了，全部重装，我也不知道为什么，我就出现了这个错误。