wangEditor富文本編輯器圖片上傳的詳細(xì)技巧

富文本編輯器是一種可以直接內(nèi)嵌于瀏覽器，并且保證所見即所得的文本編輯器，這一類型的軟件類似于Office Word的編輯功能，非常方便那些不太懂HTML用戶使用，同時(shí)這類工具的應(yīng)用非常廣泛。作為一個(gè)專業(yè)的技術(shù)人員，手上有一兩款富文本編輯器是很正常的事情，因?yàn)橹覆欢�那個(gè)項(xiàng)目就要集成一個(gè)進(jìn)去。本篇文章就給大家來(lái)介紹一款非常好用的富文本編輯器，有需要的小伙伴一起來(lái)詳細(xì)了解一下！

wangEditor是一款功能強(qiáng)大，且輕量級(jí)的WEB富文本編輯器，該軟件是基于javascript和css開發(fā)的工具，能夠給用戶提供免費(fèi)開源、簡(jiǎn)單易用、UI界面精致的特性，同時(shí)能夠?qū)崿F(xiàn)與各種瀏覽器兼容等等功能。wangEditor支持npm直接使用，通過(guò)響應(yīng)式以及自動(dòng)縮放的功能，能夠支持一個(gè)頁(yè)面多個(gè)編輯器同時(shí)操作。除此之外還支持本地圖片直接上傳，以及提供多語(yǔ)言進(jìn)行操作。使用該軟件的過(guò)程中各種配置也非常簡(jiǎn)單，開發(fā)人員可以很輕松的將它直接內(nèi)嵌于自己的網(wǎng)站或程序，用戶使用起來(lái)非常的便捷。

wangEditor富文本編輯器圖一

1. wangEditor文本編輯器中支持npm直接使用。

2. 提供應(yīng)式以及自動(dòng)縮放的功能

3. 能夠支持一個(gè)頁(yè)面多個(gè)編輯器同時(shí)操作。

4. 支持本地圖片直接上傳，以及提供多語(yǔ)言進(jìn)行操作。

5. 使用該軟件的過(guò)程中，后端需要進(jìn)行相應(yīng)配置才可使用。

6. 自定義配置表情圖標(biāo)、支持分組表情，類似QQ分組表情。

7. 上傳時(shí)配置的自定義參數(shù)`uploadImgParams`，去掉自動(dòng) encode 的功能。

8. 解決連續(xù)粘貼卡頓的問(wèn)題，將節(jié)流間隔由`500ms`改為`100ms`。

一、非跨域上傳

1. 圖片上傳的功能一直是wangEditor這款軟件的詬病之一，當(dāng)用戶在沒(méi)有做任何配置的時(shí)候，點(diǎn)擊【菜單】按鈕之后，我們智能插入網(wǎng)絡(luò)圖片，不能導(dǎo)入其他的圖片進(jìn)行使用。

2. 當(dāng)配置之后上傳組件，這個(gè)時(shí)候再點(diǎn)擊【菜單】按鈕之后，這樣才能夠進(jìn)行本地圖片的上傳，同時(shí)也能插入網(wǎng)絡(luò)圖片。

wangEditor富文本編輯器圖二

二、跨域上傳

1. 該軟件之前的版本中，插入網(wǎng)絡(luò)圖片和上傳圖片是兩個(gè)菜單，更新之后的軟件將這兩個(gè)功能進(jìn)行了合并，在沒(méi)有配置該功能時(shí)，點(diǎn)擊【菜單】按鈕之后，同樣的也只能顯示出茶日網(wǎng)絡(luò)圖片的按鈕。

2. 當(dāng)我們配置了url地址之后，再點(diǎn)擊【菜單】按鈕，這樣就能夠進(jìn)行本地圖片的上傳，以及同時(shí)也能夠支持插入網(wǎng)絡(luò)圖片。

wangEditor富文本編輯器圖三