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

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

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

wangEditor富文本編輯器圖一

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

2. 提供應式以及自動縮放的功能

3. 能夠支持一個頁面多個編輯器同時操作。

4. 支持本地圖片直接上傳，以及提供多語言進行操作。

5. 使用該軟件的過程中，后端需要進行相應配置才可使用。

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

7. 上傳時配置的自定義參數`uploadImgParams`，去掉自動 encode 的功能。

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

一、非跨域上傳

1. 圖片上傳的功能一直是wangEditor這款軟件的詬病之一，當用戶在沒有做任何配置的時候，點擊【菜單】按鈕之后，我們智能插入網絡圖片，不能導入其他的圖片進行使用。

2. 當配置之后上傳組件，這個時候再點擊【菜單】按鈕之后，這樣才能夠進行本地圖片的上傳，同時也能插入網絡圖片。

wangEditor富文本編輯器圖二

二、跨域上傳

1. 該軟件之前的版本中，插入網絡圖片和上傳圖片是兩個菜單，更新之后的軟件將這兩個功能進行了合并，在沒有配置該功能時，點擊【菜單】按鈕之后，同樣的也只能顯示出茶日網絡圖片的按鈕。

2. 當我們配置了url地址之后，再點擊【菜單】按鈕，這樣就能夠進行本地圖片的上傳，以及同時也能夠支持插入網絡圖片。

wangEditor富文本編輯器圖三