neditor.service.js 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. /**
  2. * 自定义上传接口
  3. * 由于所有Neditor请求都通过editor对象的getActionUrl方法获取上传接口,可以直接通过复写这个方法实现自定义上传接口
  4. * @param {String} action 匹配neditor.config.js中配置的xxxActionName
  5. * @returns 返回自定义的上传接口
  6. */
  7. UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
  8. UE.Editor.prototype.getActionUrl = function(action) {
  9. /* 按config中的xxxActionName返回对应的接口地址 */
  10. if (action == 'uploadimage' || action == 'uploadscrawl') {
  11. return 'https://upload.qiniup.com';
  12. } else if (action == 'uploadvideo') {
  13. return 'https://upload.qiniup.com';
  14. } else {
  15. return this._bkGetActionUrl.call(this, action);
  16. }
  17. }
  18. /**
  19. * 图片上传service
  20. * @param {Object} context UploadImage对象 图片上传上下文
  21. * @param {Object} editor 编辑器对象
  22. * @returns imageUploadService 对象
  23. */
  24. window.UEDITOR_CONFIG['imageUploadService'] = function(context, editor) {
  25. return {
  26. /**
  27. * 触发fileQueued事件时执行
  28. * 当文件被加入队列以后触发,用来设置上传相关的数据 (比如: url和自定义参数)
  29. * @param {Object} file 当前选择的文件对象
  30. */
  31. setUploadData: function(file) {
  32. return file;
  33. },
  34. /**
  35. * 触发uploadBeforeSend事件时执行
  36. * 在文件上传之前触发,用来添加附带参数
  37. * @param {Object} object 当前上传对象
  38. * @param {Object} data 默认的上传参数,可以扩展此对象来控制上传参数
  39. * @param {Object} headers 可以扩展此对象来控制上传头部
  40. * @returns 上传参数对象
  41. */
  42. setFormData: function(object, data, headers) {
  43. var date = new Date()
  44. var ext = object.file.source.ext;
  45. var uid = object.file.source.uid;
  46. var key = "" + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours() + date.getMinutes() + date.getSeconds() +'_oi_' + uid + '.' + ext;
  47. //这里可以通过data对象添加POST参数
  48. $.ajax({
  49. url: editor.getOpt('uptokenUrl'),
  50. type: 'get',
  51. async:false,
  52. }).done(function(res) {
  53. if (res.state == 1) {
  54. data['token'] = res.data.uptoken;
  55. data['key'] = key;
  56. }
  57. }).fail(function(err) {
  58. /* 上传失败 */
  59. });
  60. console.log(object, data, headers)
  61. return data;
  62. },
  63. /**
  64. * 触发startUpload事件时执行
  65. * 当开始上传流程时触发,用来设置Uploader配置项
  66. * @param {Object} uploader
  67. * @returns uploader
  68. */
  69. setUploaderOptions: function(uploader) {
  70. return uploader;
  71. },
  72. /**
  73. * 触发uploadSuccess事件时执行
  74. * 当文件上传成功时触发,可以在这里修改上传接口返回的response对象
  75. * @param {Object} res 上传接口返回的response
  76. * @returns {Boolean} 上传接口返回的response成功状态条件 (比如: res.code == 200)
  77. */
  78. getResponseSuccess: function(res) {
  79. return res.state == "SUCCESS";
  80. },
  81. /* 指定上传接口返回的response中图片路径的字段,默认为 url
  82. * 如果图片路径字段不是res的属性,可以写成 对象.属性 的方式,例如:data.url
  83. * */
  84. imageSrcField: 'url'
  85. }
  86. };
  87. /**
  88. * 视频上传service
  89. * @param {Object} context UploadVideo对象 视频上传上下文
  90. * @param {Object} editor 编辑器对象
  91. * @returns videoUploadService 对象
  92. */
  93. window.UEDITOR_CONFIG['videoUploadService'] = function(context, editor) {
  94. return {
  95. /**
  96. * 触发fileQueued事件时执行
  97. * 当文件被加入队列以后触发,用来设置上传相关的数据 (比如: url和自定义参数)
  98. * @param {Object} file 当前选择的文件对象
  99. */
  100. setUploadData: function(file) {
  101. return file;
  102. },
  103. /**
  104. * 触发uploadBeforeSend事件时执行
  105. * 在文件上传之前触发,用来添加附带参数
  106. * @param {Object} object 当前上传对象
  107. * @param {Object} data 默认的上传参数,可以扩展此对象来控制上传参数
  108. * @param {Object} headers 可以扩展此对象来控制上传头部
  109. * @returns 上传参数对象
  110. */
  111. setFormData: function(object, data, headers) {
  112. var date = new Date()
  113. var ext = object.file.source.ext;
  114. var uid = object.file.source.uid;
  115. var key = "" + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours() + date.getMinutes() + date.getSeconds() +'_oi_' + uid + '.' + ext;
  116. //这里可以通过data对象添加POST参数
  117. $.ajax({
  118. url: editor.getOpt('uptokenUrl'),
  119. type: 'get',
  120. async:false,
  121. }).done(function(res) {
  122. if (res.state == 1) {
  123. data['token'] = res.data.uptoken;
  124. data['key'] = key;
  125. }
  126. }).fail(function(err) {
  127. /* 上传失败 */
  128. });
  129. return data;
  130. },
  131. /**
  132. * 触发startUpload事件时执行
  133. * 当开始上传流程时触发,用来设置Uploader配置项
  134. * @param {Object} uploader
  135. * @returns uploader
  136. */
  137. setUploaderOptions: function(uploader) {
  138. return uploader;
  139. },
  140. /**
  141. * 触发uploadSuccess事件时执行
  142. * 当文件上传成功时触发,可以在这里修改上传接口返回的response对象
  143. * @param {Object} res 上传接口返回的response
  144. * @returns {Boolean} 上传接口返回的response成功状态条件 (比如: res.code == 200)
  145. */
  146. getResponseSuccess: function(res) {
  147. return res.state == "SUCCESS";
  148. // return res.code == 200;
  149. },
  150. /* 指定上传接口返回的response中视频路径的字段,默认为 url
  151. * 如果视频路径字段不是res的属性,可以写成 对象.属性 的方式,例如:data.url
  152. * */
  153. videoSrcField: 'url'
  154. }
  155. };
  156. /**
  157. * 涂鸦上传service
  158. * @param {Object} context scrawlObj对象
  159. * @param {Object} editor 编辑器对象
  160. * @returns scrawlUploadService 对象
  161. */
  162. window.UEDITOR_CONFIG['scrawlUploadService'] = function(context, editor) {
  163. return scrawlUploadService = {
  164. /**
  165. * 点击涂鸦模态框确认按钮时触发
  166. * 上传涂鸦图片
  167. * @param {Object} file 涂鸦canvas生成的图片
  168. * @param {Object} base64 涂鸦canvas生成的base64
  169. * @param {Function} success 上传成功回调函数,回传上传成功的response对象
  170. * @param {Function} fail 上传失败回调函数,回传上传失败的response对象
  171. */
  172. /**
  173. * 上传成功的response对象必须为以下两个属性赋值
  174. *
  175. * 上传接口返回的response成功状态条件 {Boolean} (比如: res.code == 200)
  176. * res.responseSuccess = res.code == 200;
  177. *
  178. * 指定上传接口返回的response中涂鸦图片路径的字段,默认为 url
  179. * res.videoSrcField = 'url';
  180. */
  181. uploadScraw: function(file, base64, success, fail) {
  182. /* 模拟上传操作 */
  183. var formData = new FormData();
  184. formData.append('file', file, file.name);
  185. $.ajax({
  186. url: editor.getActionUrl(editor.getOpt('scrawlActionName')),
  187. type: 'POST',
  188. //ajax2.0可以不用设置请求头,但是jq帮我们自动设置了,这样的话需要我们自己取消掉
  189. contentType: false,
  190. //取消帮我们格式化数据,是什么就是什么
  191. processData: false,
  192. data: formData
  193. }).done(function(res) {
  194. var res = JSON.parse(res);
  195. /* 上传接口返回的response成功状态条件 (比如: res.code == 200) */
  196. res.responseSuccess = res.code == 200;
  197. /* 指定上传接口返回的response中涂鸦图片路径的字段,默认为 url
  198. * 如果涂鸦图片路径字段不是res的属性,可以写成 对象.属性 的方式,例如:data.url
  199. */
  200. res.scrawlSrcField = 'url';
  201. /* 上传成功 */
  202. success.call(context, res);
  203. }).fail(function(err) {
  204. /* 上传失败 */
  205. fail.call(context, err);
  206. });
  207. }
  208. }
  209. }
  210. /**
  211. * 附件上传service
  212. * @param {Object} context UploadFile对象 附件上传上下文
  213. * @param {Object} editor 编辑器对象
  214. * @returns fileUploadService 对象
  215. */
  216. window.UEDITOR_CONFIG['fileUploadService'] = function(context, editor) {
  217. return {
  218. /**
  219. * 触发fileQueued事件时执行
  220. * 当文件被加入队列以后触发,用来设置上传相关的数据 (比如: url和自定义参数)
  221. * @param {Object} file 当前选择的文件对象
  222. */
  223. setUploadData: function(file) {
  224. return file;
  225. },
  226. /**
  227. * 触发uploadBeforeSend事件时执行
  228. * 在文件上传之前触发,用来添加附带参数
  229. * @param {Object} object 当前上传对象
  230. * @param {Object} data 默认的上传参数,可以扩展此对象来控制上传参数
  231. * @param {Object} headers 可以扩展此对象来控制上传头部
  232. * @returns 上传参数对象
  233. */
  234. setFormData: function(object, data, headers) {
  235. return data;
  236. },
  237. /**
  238. * 触发startUpload事件时执行
  239. * 当开始上传流程时触发,用来设置Uploader配置项
  240. * @param {Object} uploader
  241. * @returns uploader
  242. */
  243. setUploaderOptions: function(uploader) {
  244. return uploader;
  245. },
  246. /**
  247. * 触发uploadSuccess事件时执行
  248. * 当文件上传成功时触发,可以在这里修改上传接口返回的response对象
  249. * @param {Object} res 上传接口返回的response
  250. * @returns {Boolean} 上传接口返回的response成功状态条件 (比如: res.code == 200)
  251. */
  252. getResponseSuccess: function(res) {
  253. return res.code == 200;
  254. },
  255. /* 指定上传接口返回的response中附件路径的字段,默认为 url
  256. * 如果附件路径字段不是res的属性,可以写成 对象.属性 的方式,例如:data.url
  257. * */
  258. fileSrcField: 'url'
  259. }
  260. };