富文本編譯器在vue中的使用

創(chuàng)新互聯(lián)公司不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對營銷、技術(shù)、服務(wù)都有自己獨(dú)特見解，公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的成都網(wǎng)站制作、成都做網(wǎng)站質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級，滿足企業(yè)一站式網(wǎng)絡(luò)營銷推廣需求，讓再小的品牌網(wǎng)站制作也能產(chǎn)生價值！

在開發(fā)的過程中由于某些特殊需求，被我們使用，今天我就簡單講一講如何在vue中使用wangEditor3

首先講一下簡單的使用。

1、使用npm安裝

npm install wangeditor --save

2、vue頁面代碼如下

3、呈現(xiàn)效果如下

4、常見報(bào)錯

（1）Error in mounted hook: "HierarchyRequestError: Failed to execute 'appendChild' on 'Node': The new child element contains the parent."found in

錯誤原因：當(dāng)我們把該組件B引入另一組件A中，A中也使用了文本編譯器，當(dāng)new Vue的時候id名重復(fù)就會造成該錯誤，所以只需要換一個id號就可以了。

（2）文本框編輯處不能使用復(fù)制黏貼功能
原因父元素設(shè)置了contenteditable="fase"屬性，改為true或者去掉都可以

（3）可以使用復(fù)制黏貼功能時，通過F12打開控制臺，可以看到復(fù)制黏貼之后在容器內(nèi)會生成多個span標(biāo)簽，這樣通過button取的內(nèi)容很冗余；
原因：子元素的背景和父元素背景不一致
方法：將父元素其他的子元素移除，讓子父元素背景一致

（4） input標(biāo)簽內(nèi)部不能使用富文本編譯框的菜單

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。