【Vue3&tinymce】Vue3使用tinymce富文本编辑器

前言

注： vue2请绕道。

1. tinymce官网https://www.tiny.cloud/
2. 备用地址： The Most Advanced WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCETinyMCE is the most advanced WYSIWYG HTML editor designed to simplify website content creation. The rich text editing platform that helped launched Atlassian, Medium, Evernote and more.https://www.tiny.cloud/

下载tinymce

官网例子https://www.tiny.cloud/docs/tinymce/6/vue-cloud/

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

---

开始使用

api-key ：去官方申请key，免费的，注册账号就行。

key申请地址https://www.tiny.cloud/my-account/dashboard/

如果不填有效key，会弹出提示，影响体验。

下面是我自个配置的基本功能。

更多功能参考官网即可。 

效果图

---

网上的tinymce博客真的离谱，简直就是糊弄人，害人不浅，害的我折腾了一天，还是官方例子靠谱。

网上的教程居然是，先下载npm install --save "@tinymce/tinymce-vue"，然后再下载tinymce，然后然后，复制node_modules/tinymce目录下的文件到到public目录下，然后再开始引入并使用tinymce。

这是个啥操作，明明已经集成了在vue3已经集成了@tinymce/tinymce-vue，却还要下载一次tinymce，属实把我整懵了。

但这不是最重要的，最重要的是，还要复制node_modules/tinymce目录下的文件到public公共资源里去，简直就是离了个超级大谱，看了半天，看的我怀疑自己。设置中文还要去下载xxx文件，复制到public/xxxx/xxx目录下，我也是无语了。

官方设置中文直接配置 language: 'zh_CN'就可以了。

最要命的是全网tinymce博客一个样，都是cv。