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

10年積累的網(wǎng)站制作、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有新城免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

引入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組件

在其他頁(yè)面使用組件

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

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

之后在頁(yè)面輕松使用組件

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

網(wǎng)頁(yè)名稱：Vue+Webpack如何整合富文本編輯器TinyMce-創(chuàng)新互聯(lián)
當(dāng)前URL：http://weahome.cn/article/edddc.html