什么是tinymce富文本編輯器

“世界上最先進(jìn)的富文本編輯器”這是一句寫在tinymce官網(wǎng)上的一句好，在實際體驗中的確是這樣，使用體驗非常優(yōu)秀。特別是tinymce的插件式開發(fā)方式，使其具備極高的自定義體驗。

經(jīng)過實際使用tinymce5.8.2是可以集成在vue3中，通過組件化的方式進(jìn)行調(diào)用。

缺點

Tinymce是非常優(yōu)秀的一個插件式富文本編輯器，你可以在正常的前端項目和vue等多種項目中進(jìn)行集成使用，但是在vue3中使用tinymce富文本編輯器，不僅需要tinymce的支持，而且需要@tinymce/tinymce-vue的插件支持，所以無法進(jìn)行cdn加速（目前我沒有找到合適方法，有建議可以留言）所以體積比較大，僅打包后的js就1.2mb的大小。

加載中文語言

由于tinymce5.0以后的版本官方?jīng)]有出簡體中文包，僅說了一句可以使用4.0的中文包，但是4.0的中文包會在使用時存在翻譯不準(zhǔn)的情況，我對中文包內(nèi)容進(jìn)行了適當(dāng)優(yōu)化，你可以直接進(jìn)行使用，中文包地址https://gitee.com/unitui/unituicli3.git，在unituicli3/ src / unitui / assets / tinymce文件夾內(nèi)。

安裝使用：

安裝tinymce

npm install tinymce

安裝tinymce-vue

npm install @tinymce/tinymce-vue

新建一個組件，寫入如下內(nèi)容。

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

你可以在組件中進(jìn)行引用注冊即可，可以通過v-model進(jìn)行雙向綁定。

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

實際效果

開源實踐項目

推薦gitee開源半月斬獲17星的unitui快速vue3+elementPlus開發(fā)框架，此開源項目由我個人維護(hù)喜歡可以使用哦

結(jié)語

喜歡可以關(guān)注、點贊、轉(zhuǎn)發(fā)哦。