前言

創(chuàng)新互聯(lián)建站專注于肅州網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供肅州營(yíng)銷型網(wǎng)站建設(shè)，肅州網(wǎng)站制作、肅州網(wǎng)頁設(shè)計(jì)、肅州網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務(wù)，打造肅州網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供肅州網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

前一段時(shí)間公司Vue.js項(xiàng)目需要使用UEditor富文本編輯器,在百度上搜索一圈沒有發(fā)現(xiàn)詳細(xì)的說明,決定自己嘗試,忙活了一天終于搞定了。

具體可以參考這篇文章：https://www.jb51.net/article/118413.htm

ueditor是百度編輯器，官網(wǎng)地址：http://ueditor.baidu.com/website/

完整的功能演示，可以參考：http://ueditor.baidu.com/website/onlinedemo.html

最近工作中要求升級(jí)，需要在vue中創(chuàng)建多個(gè)ueditor實(shí)例，我使用neditor，其實(shí)就是把ueditor樣式美化了下，其他和ueditor幾乎一樣，下面話不多說了，來一起看看詳細(xì)的介紹吧。

截圖

說明

下載ueditor或neditor源碼,拷貝到static目錄下面

然后修改ueditor.config.js配置文件

在vue項(xiàng)目的main.js添加ueditor引用

新建3個(gè)頁面 home,tab1,tab2。tab1和tab2是home下面的子頁面

在router-view外面一定要添加keep-alive組件和transition組件,不然ueditor實(shí)例無法保存

在components文件夾下面新建一個(gè)editor作為編輯器的公共組件

在tab1中調(diào)用editor,同時(shí)要傳入一個(gè)id并在editor頁面接受,注意如果需要多個(gè)實(shí)例,id一定不能相同

editor頁面代碼,因?yàn)槲覀冊(cè)趓outer-view套用了keep-alive,所以u(píng)editor的初始化一定要放在activated里面,
確保每次進(jìn)入頁面都會(huì)重新渲染ueditor,在deactivated里面調(diào)用ueditor的destroy方法,確保每次離開頁面的時(shí)候
會(huì)銷毀編輯器實(shí)例,這樣就可以渲染多個(gè)ueditor實(shí)例了,并且每次切換都能保存編輯器的內(nèi)容。

如果多個(gè)tab只需要一個(gè)實(shí)例請(qǐng)調(diào)用reset()方法

源碼地址

github：https://github.com/oblivioussing/vue-ueditor-multi

本地下載：http://xiazai.jb51.net/201711/yuanma/vue-ueditor-multi(jb51.net).rar

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。