富文字編輯器:UEditor與wangEditor 初使用總結

## 1、UEditor

 1. UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文字web編輯器，具有輕量，可定製，注重使用者體驗等特點，開源基於MIT協議，允許自由使用和修改程式碼。
 2. 外掛多，基本滿足各種需求


### 1.1、環境

> 環境搭建，結合了XAMPP(建站整合軟體包)搭建後臺，圖片上傳功能實現的必備-結合後臺

### 1.2、使用

>1、研究官方文件，使用官方提供的一些[方法][1]
2、[工具欄定製][2]
3、本次研究主要研究UEditor的圖片上傳功能
4、研究具體檔案中具體功能的事件執行
...
### 1.3、遇見的問題
> 1、複製的圖片有些不能上傳到伺服器上
2、批量上傳--重複，順序錯亂
3、從word文件中複製圖片--空白顯示

### 1.4、問題點
>1、對於不能上傳的伺服器上的，比如衝網上覆制貼上的，只要被複制的檔案是以圖片格式儲存的就可以上傳到服     務器上，但是如果不是圖片格式的，複製到編輯器中的圖片就指向他原來的伺服器上
2、圖片上傳重複，Uploader.class.php 中 的隨機數函式$randNum = rand(1, 10000000000) . rand(1,           10000000000); 這個取值範圍太大了，超過了int的範圍，從而導致了錯誤。
3、圖片上傳錯亂，多圖上傳使用外掛webuploader，他是多執行緒上傳的，ueditor對“uploadSuccess”的處理是上傳   成功一張，就加入到陣列中，這樣如果靠後圖片很小，上傳就很快，以至先加入隊例，最終加入文字框的順序也亂了
4、xss過濾中，任何不在白名單中的標籤和屬性功能直接消失

### 1.5、後續
>在檔案管理系統中，使用編輯器時，發現在ueditor，沒有使用模組化,為了在react中使用該編輯器，對他的原始碼做了一下修改，參照網上[大神][3]的做法，關鍵檔案修改匯出方式為模組化，並且以import的方式引入其他檔案依賴。同時需要引入一些loader，使react專案有處理這些檔案的能力。目前已在react中引入
缺點：不利於更新ueditor的版本

--- 
## 2、wangEditor
> 基於javascript和css開發的 Web富文字編輯器， 輕量、簡潔、易用、開源免費

### 2.1、使用
> 結合[官方文件][4]使用方法，在專案中搭建起來
在專案中由於使用的彈框，所以使用了setTimeout定時函式，獲取節點，建立編輯器
H標籤無效 ---> 被清除了

--- 
## 3、比較

 1. 模組化
 
> UEditor 未模組化,在react中使用需要修改原始碼
wangEdior 模組化可以很好的在react 框架結合使用

 2. 豐富度

> UEditor 外掛多，基本滿足各種需求 由百度web前端研發部開發
wangEdior 輕量簡潔，目前是個人維護，真的很簡潔~


  [1]: https://ueditor.baidu.com/doc/
  [2]: http://fex.baidu.com/ueditor/#start-toolbar
  [3]: https://www.jianshu.com/p/d5d5ee66e733
  [4]: https://www.kancloud.cn/wangfupeng/wangeditor3/335769
複製程式碼