UEditor富文本編輯器上傳圖片到阿里雲

　　UEditor是一款百度旗下的富文本編輯器，樣式和功能都很好看很多，所以在一個項目中使用了這個編輯器。使用起來很方便，直接引入即可，只有表情和文件圖片上傳的地方需要配置一下。表情的去年的一篇文章里有，這里主要說一下圖片上傳。以前一直是上傳到電信的服務器，今年公司買了某里的服務器后，要切過去，后台目前只提供了一個公共的接口查域名、key、簽名等，前端是參照某里官網介紹的上傳方法來實現上傳的。但是UEditor里的圖片上傳是寫在自己里邊的，要改的話一是怕改出問題，二是怕萬一以后又要改，所以采用增加一個自定義上傳的功能。

1.UEditor文件圖片上傳

　　關於這個網上有很多文章，一致的方法是后台定義一個接口來輔助上傳。這里不再贅述，可以直接搜一下，很多文章介紹，或者官網也有指導。這里提一下UEditor的源碼，因為下邊的內容是要修改源碼的。

源碼很長，幾萬行，我也只看了幾眼主要的地方。比如在config.js里的配置，在all.js里的指令UE.commands，執行指令execCommand。

2.某里上傳文件

　　這里使用的是某里的OSS文件系統，官網有demo，是基於plupload的。plupload也看了幾眼代碼，然后寫了兩個方案，一個是直接使用某里的demo做修改（需要依賴plupload），一個是仿照plupload組織一下上傳的請求的格式（某里的接口的參數是按照這個定義的），這樣就不需要進行那么多依賴。參數是form格式，大致代碼如下

　　　　let params = {
            // key--路徑+名稱
            'key' : this.storageId,
            'policy': this.policy,
            'OSSAccessKeyId': this.OSSAccessKeyId, 
            'success_action_status' : this.success_action_status //讓服務端返回200,不然，默認會返回204
            ,'signature': this.signature,
            file
        }
        for(let key in params) {
            fd.append(key, params[key])
        }

 

3.UEditor自定義功能

　　上傳到阿里雲，最好的實現方法是服務來實現，即1里邊說的接口。如果服務支持，可以不用在這里浪費時間了。我是因為沒有接口，所以才自己寫的。

　　自定義新功能步驟：

3.1在ueditor.config.js中找到toolbars的數組，並在數組中添加一個你需要新增的按鈕功能名稱；

3.2在zh-cn.js 中找到labelMap並添加key是你3.1的名稱的提示，主要是用於鼠標放置上去顯示的文字提示內容，當然你也可以順便加一下英文文件里的提示；

3.3.在ueditor.all.js  中找到"btnCmds" ,在數組的最后添加上你的3.1的功能的名稱。到這一步，你的頁面上已經可以出現新的圖標了，但是現在顯示的是B，即默認的加粗按鈕的樣式；

3.4在ueditor.css中添加你的按鈕的樣式，仿照其他按鈕，可以使用圖片，也可以使用編輯器上的圖片，這里同樣要用到上邊的名稱；

3.5在ueditor.all.js 找到UE.commands的地方，寫在一起方便查找，仿照它的格式寫你自己的按鈕的事件，這里同樣要用到上邊的名稱；

　　如果你的頁面是使用的全部功能，那到這里已經完成了。如果是自定義的（自己選擇的），別忘了加上你新增的這個名稱。

 

　　如果嫌all.js太大，可以找一些在線壓縮的網站壓縮一下。比如：https://tool.oschina.net/jscompress?type=3

到這里已經完成了，如果想看詳細代碼的可以留言或者看我的git：

https://github.com/MRlijiawei/demos/tree/master/files/ueditor-custom&aliupload下