這篇文章主要為大家展示了“Vue+Webpack如何整合富文本編輯器TinyMce”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue+Webpack如何整合富文本編輯器TinyMce”這篇文章吧。

創(chuàng)新互聯(lián)從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元泗洪做網(wǎng)站,已為上家服務(wù),為泗洪各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

選擇一個(gè)合適的富文本編輯器對(duì)于一個(gè)前端項(xiàng)目至關(guān)重要，這次我基于Vue來開發(fā)我項(xiàng)目中的前端部分，經(jīng)過權(quán)衡選擇了tinymce。其在UI，功能都很適合，tinymce官方文檔：點(diǎn)擊打開鏈接；

引入tinymce 我選用的版本4.7.4

npm install tinymce -S

將tinymce創(chuàng)建為Vue的組件，便于日后復(fù)用，創(chuàng)建組件editor.vue

在鉤子mounted 進(jìn)行了tinymce的初始化工作，調(diào)用 tinymce.init(setting),setting為配置信息這樣我們便初步配置完成了editor組件

在其他頁面使用組件

此刻我們已經(jīng)完成了百分之90的配置 ，最后只需將node_modules/_tinymce@4.7.4@tinymce/文件夾下的skins文件夾放置于項(xiàng)目根目錄下，這樣tinymce才可獲取皮膚css文件

下載并解壓語言包langs文件夾放置項(xiàng)目根目錄，中文下載鏈接 ，其他語言包選擇；

之后在頁面輕松使用組件

以上是“Vue+Webpack如何整合富文本編輯器TinyMce”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！