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

時間 2019-11-24

標籤 wangeditor 基於 javascript css 開發 web 文本編輯器輕量簡潔易用開源免費欄目 JavaScript 简体版

原文原文鏈接

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>wangEditor上傳圖片到服務器</title>
  7 </head>
  8 
  9 <body>
 10 
 11     <div id="editor"></div>
 12 
 13     <!-- 注意， 只須要引用 JS，無需引用任何 CSS ！！！-->
 14     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 15     <script type="text/javascript" src="script/wangEditor-3.1.1.js"></script>
 16     <script type="text/javascript">
 17     // 聲明富文本編輯器
 18     var E = window.wangEditor;
 19 
 20     // 初始化富文本編輯器
 21     var editor = new E('#editor');
 22 
 23     // 上傳圖片到服務器
 24     editor.customConfig.uploadImgServer = '/upload'; // 其中/upload是上傳圖片的服務器端接口
 25 
 26     // 將圖片大小限制爲 3M
 27     editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
 28 
 29     // 默認爲 10000 張（即不限制），須要限制可本身配置
 30     // 限制一次最多上傳 5 張圖片
 31     editor.customConfig.uploadImgMaxLength = 5;
 32 
 33     // 上傳圖片時可自定義傳遞一些參數，例如傳遞驗證的token等。參數會被添加到formdata中
 34     editor.customConfig.uploadImgParams = {
 35         // 若是版本 <=v3.1.0 ，屬性值會自動進行 encode ，此處無需 encode
 36         // 若是版本 >=v3.1.1 ，屬性值不會自動 encode ，若有須要本身手動 encode
 37         token: 'abcdef12345'
 38     }
 39 
 40     // 若是還須要將參數拼接到 url 中，可再加上以下配置
 41     editor.customConfig.uploadImgParamsWithUrl = true;
 42 
 43     // 上傳圖片時，可自定義filename，即在使用formdata.append(name, file)添加圖片文件時，自定義第一個參數。
 44     editor.customConfig.uploadFileName = 'yourFileName';
 45 
 46     // 上傳圖片時刻自定義設置 header
 47     editor.customConfig.uploadImgHeaders = {
 48         'Accept': 'text/x-json'
 49     }
 50 
 51     // 跨域上傳中若是須要傳遞 cookie 需設置 withCredentials
 52     editor.customConfig.withCredentials = true;
 53 
 54     // 默認的 timeout 時間是 10 秒鐘
 55     // 將 timeout 時間改成 3s
 56     editor.customConfig.uploadImgTimeout = 3000;
 57 
 58     // 上傳圖片的錯誤提示默認使用alert彈出，你也能夠自定義用戶體驗更好的提示方式
 59     editor.customConfig.customAlert = function(info) {
 60         // info 是須要提示的內容
 61         alert('自定義提示：' + info);
 62     }
 63 
 64     // 可以使用監聽函數在上傳圖片的不一樣階段作相應處理
 65     editor.customConfig.uploadImgHooks = {
 66         before: function(xhr, editor, files) {
 67             // 圖片上傳以前觸發
 68             // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件
 69 
 70             // 若是返回的結果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
 71             // return {
 72             //     prevent: true,
 73             //     msg: '放棄上傳'
 74             // }
 75         },
 76         success: function(xhr, editor, result) {
 77             // 圖片上傳並返回結果，圖片插入成功以後觸發
 78             // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
 79         },
 80         fail: function(xhr, editor, result) {
 81             // 圖片上傳並返回結果，但圖片插入錯誤時觸發
 82             // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
 83         },
 84         error: function(xhr, editor) {
 85             // 圖片上傳出錯時觸發
 86             // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
 87         },
 88         timeout: function(xhr, editor) {
 89             // 圖片上傳超時時觸發
 90             // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
 91         },
 92 
 93         // 若是服務器端返回的不是 {errno:0, data: [...]} 這種格式，可以使用該配置
 94         // （可是，服務器端返回的必須是一個 JSON 格式字符串！！！不然會報錯）
 95         customInsert: function(insertImg, result, editor) {
 96             // 圖片上傳並返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）
 97             // insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果
 98 
 99             // 舉例：假如上傳圖片成功後，服務器端返回的是 {url:'....'} 這種格式，便可這樣插入圖片：
100             var url = result.url
101             insertImg(url)
102 
103             // result 必須是一個 JSON 格式字符串！！！不然報錯
104         }
105     }
106 
107     // 若是想徹底本身控制圖片上傳的過程，可使用以下代碼
108     editor.customConfig.customUploadImg = function(files, insert) {
109         // files 是 input 中選中的文件列表
110         // insert 是獲取圖片 url 後，插入到編輯器的方法
111 
112         // 上傳代碼返回結果以後，將圖片插入到編輯器中
113         insert(imgUrl)
114     }
115 
116     // 建立編輯器1
117     editor.create();
118     </script>
119 </body>
120 
121 </html>