日韩av免费一二三区-2021精品久久久久精品k8-亚洲红杏AV无码专区首页-99精品久久久久久水蜜桃

咨詢(xún)電話(huà):
15628812133
21
2023/06

Vue如何引入和使用wangEditor富文本編輯器

發(fā)布時(shí)間:2023-06-21 09:58:13
發(fā)布者:MaiMai
瀏覽量:
0

首先需要下載安裝包,可通過(guò)npmCDN的方式,我們這里以npm為例,具體可去官網(wǎng)查看。

 npm install @wangeditor/editor --save

安裝vue2組件(可選):npm install @wangeditor/editor-for-vue --save

安裝vue3組件(可選):npm install @wangeditor/editor-for-vue@next --save

接著在components文件夾下新建組件,如圖:

621.png

在其中編寫(xiě)子組件代碼,具體 可查看>>

然后在父組件中調(diào)用,

621(1).png

621-2.png


有關(guān)組件傳值的內(nèi)容可以點(diǎn)擊此鏈接>>查看。

這樣,wangeditor富文本編輯器就可以成功使用了。獲取編輯器內(nèi)容的方法可以通過(guò)getEditorTextgetEditorHtml來(lái)獲??;若安裝的是vue組件,則可直接用v-model雙向綁定內(nèi)容。

621-3.png

更改編輯器的樣式同elementUI類(lèi)似,需要用到::v-deep樣式穿透。

關(guān)鍵詞:
返回列表