Vue3中怎样集成最强的tinymce富文本编辑器

什么是tinymce富文本编辑器

“世界上最先进的富文本编辑器”这是一句写在tinymce官网上的一句好，在实际体验中的确是这样，使用体验非常优秀。特别是tinymce的插件式开发方式，使其具备极高的自定义体验。

经过实际使用tinymce5.8.2是可以集成在vue3中，通过组件化的方式进行调用。

缺点

Tinymce是非常优秀的一个插件式富文本编辑器，你可以在正常的前端项目和vue等多种项目中进行集成使用，但是在vue3中使用tinymce富文本编辑器，不仅需要tinymce的支持，而且需要@tinymce/tinymce-vue的插件支持，所以无法进行cdn加速（目前我没有找到合适方法，有建议可以留言）所以体积比较大，仅打包后的js就1.2mb的大小。

加载中文语言

由于tinymce5.0以后的版本官方没有出简体中文包，仅说了一句可以使用4.0的中文包，但是4.0的中文包会在使用时存在翻译不准的情况，我对中文包内容进行了适当优化，你可以直接进行使用，中文包地址
https://gitee.com/unitui/unituicli3.git，在unituicli3/ src / unitui / assets / tinymce文件夹内。

安装使用：

安装tinymce

npm install tinymce

安装tinymce-vue

npm install @tinymce/tinymce-vue

新建一个组件，写入如下内容。

源码地址：
https://gitee.com/unitui/unituicli3/blob/master/src/unitui/sub/Uedit.vue

你可以在组件中进行引用注册即可，可以通过v-model进行双向绑定。

源码：
https://gitee.com/unitui/unituicli3/blob/master/src/uviews/unit/Edit.vue

实际效果

开源实践项目

推荐gitee开源半月斩获17星的unitui快速vue3+elementPlus开发框架，此开源项目由我个人维护喜欢可以使用哦

结语

喜欢可以关注、点赞、转发哦。