什么是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开发框架,此开源项目由我个人维护喜欢可以使用哦
结语
喜欢可以关注、点赞、转发哦。