什么是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開發框架，此開源項目由我個人維護喜歡可以使用哦

結語

喜歡可以關注、點贊、轉發哦。