什么是tinymce富文本編輯器

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

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

缺點(diǎn)

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

加載中文語(yǔ)言

由于tinymce5.0以后的版本官方?jīng)]有出簡(jiǎn)體中文包，僅說(shuō)了一句可以使用4.0的中文包，但是4.0的中文包會(huì)在使用時(shí)存在翻譯不準(zhǔn)的情況，我對(duì)中文包內(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

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

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

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

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

實(shí)際效果

開(kāi)源實(shí)踐項(xiàng)目

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

結(jié)語(yǔ)

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