customplugin.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. define(['nkeditor-core'], function (Nkeditor) {
  2. Nkeditor.lang({
  3. remoteimage: '下载远程图片',
  4. search: '查找替换',
  5. math: '插入公式',
  6. });
  7. var getImageFromUrl = function (url, callback) {
  8. var req = new XMLHttpRequest();
  9. req.open("GET", Fast.api.fixurl("/addons/nkeditor/index/download") + "?url=" + encodeURIComponent(url), true);
  10. req.responseType = "blob";
  11. req.onload = function (event) {
  12. var file;
  13. if (req.status >= 200 && req.status < 300 || req.status == 304) {
  14. var blob = req.response;
  15. var mimetype = blob.type || "image/png";
  16. var mimetypeArr = mimetype.split("/");
  17. if (mimetypeArr[0].toLowerCase() === 'image') {
  18. console.log(mimetypeArr, mimetype);
  19. var suffix = ['jpeg', 'jpg', 'bmp', 'gif', 'png', 'webp', 'svg+xml'].indexOf(mimetypeArr[1]) > -1 ? mimetypeArr[1] : 'png';
  20. suffix = suffix === 'svg+xml' ? 'svg' : suffix;
  21. var filename = Math.random().toString(36).substring(5, 15) + "." + suffix;
  22. file = new File([blob], filename, {type: mimetype});
  23. }
  24. }
  25. callback.call(this, file);
  26. };
  27. req.send();
  28. return;
  29. };
  30. Nkeditor.plugin('multiimage', function (K) {
  31. var self = this, name = 'multiimage', lang = self.lang(name + '.'),
  32. allowImages = K.undef(self.allowImages, false);
  33. var click = function () {
  34. var html = [
  35. '<div class="ke-dialog-content-inner">',
  36. '<div class="ke-dialog-row ke-clearfix">',
  37. '<div class=""><div class="ke-inline-block ke-upload-button">' +
  38. '<form class="ke-upload-area ke-form nice-validator n-default" method="post" enctype="multipart/form-data" style="width: 266px;margin:50px auto;">' +
  39. '<span class="ke-button-common"><input type="button" class="ke-button-common ke-button" value="批量上传图片" style="width:128px;"></span><input type="file" class="ke-upload-file" name="imgFiles" multiple style="width:128px;left:0;right:inherit" tabindex="-1">' +
  40. '<span class="ke-button-common" style="margin-left:10px;"><input type="button" class="ke-button-common ke-button ke-select-image" style="width:128px;" value="从图片空间选择"></span>' +
  41. '</form>' +
  42. '</div></span></div>',
  43. '</div>',
  44. '</div>'
  45. ].join('');
  46. var dialog = self.createDialog({
  47. name: name,
  48. width: Math.min(document.body.clientWidth, 450),
  49. height: 260,
  50. title: self.lang(name),
  51. body: html,
  52. noBtn: {
  53. name: self.lang('no'),
  54. click: function (e) {
  55. self.hideDialog().focus();
  56. }
  57. }
  58. }),
  59. div = dialog.div;
  60. $("input[name=imgFiles]", div).change(function () {
  61. dialog.showLoading();
  62. var files = $(this).prop('files');
  63. self.options.uploadFiles.call(self, files).then(function(){
  64. self.hideDialog().focus();
  65. });
  66. return false;
  67. });
  68. $(".ke-select-image", div).click(function () {
  69. self.loadPlugin('filemanager', function () {
  70. self.plugin.filemanagerDialog({
  71. dirName: 'image',
  72. multiple: true,
  73. clickFn: function (urls) {
  74. $.each(urls, function (i, url) {
  75. self.exec('insertimage', Config.nkeditor.fullmode ? Fast.api.cdnurl(url, true) : Fast.api.cdnurl(url));
  76. });
  77. }
  78. });
  79. });
  80. self.hideDialog().focus();
  81. });
  82. };
  83. self.clickToolbar(name, click);
  84. });
  85. //远程下载图片
  86. Nkeditor.plugin('remoteimage', function (K) {
  87. var editor = this, name = 'remoteimage';
  88. var Upload = require('upload');
  89. editor.plugin.remoteimage = {
  90. download: function (e) {
  91. var that = this;
  92. var html = that.html();
  93. var staging = {}, orgined = {}, index = 0, images = 0, completed = 0, failured = 0;
  94. var checkrestore = function () {
  95. if (completed + failured >= images) {
  96. $.each(staging, function (i, j) {
  97. that.html(that.html().replace("<code>" + i + "</code>", j));
  98. });
  99. Toastr.info("成功:" + completed + " 失败:" + failured);
  100. }
  101. };
  102. html.replace(/<code>([\s\S]*?)<\/code>/g, function (code) {
  103. staging[index] = code;
  104. return "<code>" + index + "</code>";
  105. }
  106. );
  107. html = html.replace(/<img([\s\S]*?)\ssrc\s*=\s*('|")((http(s?):)([\s\S]*?))('|")([\s\S]*?)[\/]?>/g, function () {
  108. images++;
  109. var url = arguments[3];
  110. var placeholder = '<img src="' + Config.site.cdnurl + "/assets/addons/nkeditor/img/downloading.png" + '" data-index="' + index + '" />';
  111. //如果是云存储的链接或本地的链接,则忽略
  112. if ((Config.upload.cdnurl && url.indexOf(Config.upload.cdnurl) > -1) || url.indexOf(location.origin) > -1) {
  113. completed++;
  114. return arguments[0];
  115. } else {
  116. orgined[index] = arguments[0];
  117. }
  118. var attributes = arguments[1] + " " + arguments[8];
  119. attributes = attributes.replace(/'/g, '"').replace(/\sdata\-(src|original|actualsrc|ke\-src)\s*=\s*('|")(.*?)('|")/g, '');
  120. //下载远程图片
  121. (function (index, url, placeholder, attributes) {
  122. placeholder = new RegExp('\<img src="((?!\\<).)*?" data-index="' + index + '"(.*?)\>', 'g');
  123. getImageFromUrl(url, function (file) {
  124. if (!file) {
  125. failured++;
  126. that.html(that.html().replace(placeholder, orgined[index]));
  127. checkrestore();
  128. } else {
  129. Upload.api.send(file, function (data) {
  130. completed++;
  131. var replaceValue = '<img src="' + (Config.nkeditor.fullmode ? Fast.api.cdnurl(data.url, true) : Fast.api.cdnurl(data.url)) + '" ' + attributes + ' />';
  132. that.html(that.html().replace(placeholder, replaceValue));
  133. checkrestore();
  134. }, function (data) {
  135. failured++;
  136. that.html(that.html().replace(placeholder, orgined[index]));
  137. checkrestore();
  138. });
  139. }
  140. });
  141. })(index, url, placeholder, attributes);
  142. index++;
  143. return placeholder;
  144. });
  145. if (index > 0) {
  146. that.html(html);
  147. } else {
  148. Toastr.info("没有需要下载的远程图片");
  149. }
  150. }
  151. };
  152. // 点击图标时执行
  153. editor.clickToolbar(name, editor.plugin.remoteimage.download);
  154. });
  155. //查找替换
  156. Nkeditor.plugin('search', function (K) {
  157. var self = this, name = 'search', lang = self.lang(name + '.');
  158. var click = function () {
  159. var html = [
  160. '<div class="ke-dialog-content-inner">',
  161. '<div class="ke-dialog-row ke-clearfix">',
  162. '<div class=""><div class="ke-inline-block ke-upload-button">' +
  163. '<form class="ke-upload-area ke-form nice-validator n-default" method="post" style="width: 366px;margin:20px auto;">' +
  164. '<div style="margin-bottom:20px;color:red;">温馨提示:替换完成后务必核对最终结果是否正确</div>' +
  165. '<span class="ke-button-common">请输入查找的字符:<input type="text" class="ke-input-text" name="search" value="" placeholder="" style="width:220px;"></span>' +
  166. '<span class="ke-button-common" style="margin-top:10px;">请输入替换的字符:<input type="text" name="replace" class="ke-input-text" value="" placeholder="" style="width:220px;"></span>' +
  167. '</form>' +
  168. '</div></span></div>',
  169. '</div>',
  170. '</div>'
  171. ].join('');
  172. var dialog = self.createDialog({
  173. name: name,
  174. width: Math.min(document.body.clientWidth, 450),
  175. height: 260,
  176. title: self.lang(name),
  177. body: html,
  178. yesBtn: {
  179. name: self.lang('yes'),
  180. click: function (e) {
  181. var search = $("input[name=search]", self.bodyDiv).val();
  182. var replace = $("input[name=replace]", self.bodyDiv).val();
  183. if (search === '') {
  184. Layer.msg("查找的字符不能为空");
  185. return false;
  186. }
  187. if (search === replace) {
  188. Layer.msg("查找的字符不能等于替换的字符");
  189. return false;
  190. }
  191. var html = self.html();
  192. if (html === '') {
  193. Layer.msg("暂无可替换的文本");
  194. }
  195. var searchExp = new RegExp("(" + search + ")(?!([^<]+)?>)", "gi");
  196. var matches = html.match(searchExp);
  197. if (matches && matches.length > 0) {
  198. self._firstAddBookmark = true;
  199. self.addBookmark(false);
  200. self.html(html.replace(searchExp, replace));
  201. Toastr.success("共完成" + matches.length + "处文本替换");
  202. } else {
  203. Layer.msg("暂未找到可替换的文本");
  204. }
  205. self.hideDialog().focus();
  206. }
  207. },
  208. noBtn: {
  209. name: self.lang('no'),
  210. click: function (e) {
  211. self.hideDialog().focus();
  212. }
  213. }
  214. }),
  215. div = dialog.div;
  216. };
  217. self.clickToolbar(name, click);
  218. });
  219. return Nkeditor;
  220. });