React中使用UMEditor

最近項目中須要使用富文本編輯器，參考了運營小姐姐平常使用平臺上的編輯器，最後考慮採用百度的UMEditor。由於輕量，功能和配置簡單，沒有不少定製化的功能，因此沒采用UEditor。不過我後續會出一篇文章將UEditor的二次開發。

umeditor的引入

組件設計

首先看一下組件大體的內容：
1.組件props：

2.組件關鍵的成員屬性：

3.簡單的render:

4.UMEditor的實例化

UMEditor源碼裏須要改動的主要就是圖片的請求了，配置中的imgUrl我傳的是一個方法，這個方法中請求後臺並返回Promise<{url:string}>

源碼修改

源碼修改兩個文件
image.js中兩處更改

autoupload.js中一處修改

UMEditor的源碼存放在dll目錄下，打包時會被webpack拷貝道相應的目錄下，UMEDITOR_HOME_URL和這個目錄路徑保持一致

umeditor的依賴處理

文件合併

因爲依賴文件過多，咱們使用gulp合併一下

core文件夾下的依賴合併爲core.min.js,其餘plugin，ui，addapter也同樣合併爲相應的min.js
本來由editor_api.js引入依賴的，如今咱們本身寫個方法引入。

依賴加載

組件中定義須要引入的文件，這是一個二維數組，同級的文件按順序引入，不一樣級別的能夠併發請求，好比：['/third-party/jquery.min.js', '/third-party/template.min.js']中的兩個文件同時請求，可是保證它們都load完再請求後面的文件

加載的時候使用SyncRequire方法

使用一步迭代器實現可控加載

loadDep負責文件加載，具體以下：

SyncRequire內部維護一個異步迭代器，迭代的對象是每個文件的加載。最後使用for await進行異步迭代

若是是一個文件路徑數組，則說明這個數組中的文件能夠同時使用loadDep加載，若是是一個文件路徑字符串，則說明這個文件加載完才能夠加載後面的文件。loaders具體實現以下

好了，有了這個SyncRequire方法，就能夠既同時又順序加載咱們的外部js或者css文件了，最後能夠在控制檯中驗證效果