plugin_1.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. (function () {
  2. CKEDITOR.plugins.add( 'uploadimage', {
  3. requires: ["dialog"],
  4. init: function( editor ) {
  5. editor.addCommand("uploadimage", new CKEDITOR.dialogCommand("uploadimage"));
  6. editor.ui.addButton("uploadimage", {
  7. label: "图片文件上传", //调用dialog时显示的名称
  8. command: "uploadimage",
  9. icon: this.path + "templates.png" //在toolbar中的图标
  10. });
  11. backends = {
  12. basic: {
  13. upload: uploadBasic,
  14. uploadImgUrl:"",
  15. required: ['uploadUrl'],
  16. init: function() {
  17. }
  18. }
  19. };
  20. var checkRequirement = function(condition, message) {
  21. if (!condition)
  22. throw Error("Assert failed" + (typeof message !== "undefined" ? ": " + message : ""));
  23. };
  24. function validateConfig() {
  25. var errorTemplate = 'uploadimageUpload Error: ->';
  26. checkRequirement(
  27. editor.config.hasOwnProperty('uploadimageConfig'),
  28. errorTemplate + "Missing required uploadimageConfig in CKEDITOR.config.js"
  29. );
  30. var backend = backends[editor.config.uploadimageConfig.backend];
  31. var suppliedKeys = Object.keys(editor.config.uploadimageConfig.settings);
  32. var requiredKeys = backend.required;
  33. var missing = requiredKeys.filter(function(key) {
  34. return suppliedKeys.indexOf(key) < 0
  35. });
  36. if (missing.length > 0) {
  37. throw 'Invalid Config: Missing required keys: ' + missing.join(', ')
  38. }
  39. }
  40. validateConfig();
  41. var backend = backends[editor.config.uploadimageConfig.backend];
  42. backend.init();
  43. function doNothing(e) { }
  44. function orPopError(err) { alert(err.data.error) }
  45. function dropHandler(e) {
  46. e.preventDefault();
  47. var file = e.dataTransfer.files[0];
  48. backend.upload(file).then(insertImage, orPopError);
  49. alert("dohand")
  50. }
  51. editor.upload = up;
  52. function up(file) {
  53. backend.upload(file).then(insertImage, orPopError);
  54. }
  55. editor.apiUri = editor.config.uploadimageConfig.settings.downloadUrl;
  56. function insertImage(href) {
  57. var elem = editor.document.createElement('img', {
  58. attributes: {
  59. src: editor.apiUri+href
  60. }
  61. });
  62. editor.insertElement(elem);
  63. }
  64. function addHeaders(xhttp, headers) {
  65. for (var key in headers) {
  66. if (headers.hasOwnProperty(key)) {
  67. xhttp.setRequestHeader(key, headers[key]);
  68. }
  69. }
  70. }
  71. function post(url, data, headers) {
  72. return new Promise(function(resolve, reject) {
  73. var xhttp = new XMLHttpRequest();
  74. var formData = new FormData();
  75. formData.append("file", data);
  76. formData.append("fileName", data.name);
  77. formData.append("type", "images");
  78. xhttp.open('POST', url);
  79. addHeaders(xhttp, headers);
  80. xhttp.onreadystatechange = function () {
  81. if (xhttp.readyState === 4) {
  82. if (xhttp.status === 200) {
  83. var requireData=JSON.parse(xhttp.responseText);
  84. resolve(requireData.imageUrl);
  85. } else {
  86. reject(JSON.parse(xhttp.responseText));
  87. }
  88. }
  89. };
  90. xhttp.send(formData);
  91. });
  92. }
  93. function uploadBasic(file) {
  94. var settings = editor.config.uploadimageConfig.settings;
  95. return post(settings.uploadUrl, file, settings.headers);
  96. }
  97. editor.on('paste', function( evt ) {
  98. //if ( !checkImage( evt.data.dataValue ) )
  99. console.log('1231');
  100. evt.cancel();
  101. });
  102. CKEDITOR.on('instanceReady', function() {
  103. var iframeBase = document.querySelector('iframe').contentDocument.querySelector('html');
  104. var iframeBody = iframeBase.querySelector('body');
  105. iframeBody.ondragover = doNothing;
  106. iframeBody.ondrop = dropHandler;
  107. paddingToCenterBody = ((iframeBase.offsetWidth - iframeBody.offsetWidth) / 2) + 'px';
  108. iframeBase.style.height = '100%';
  109. iframeBase.style.width = '100%';
  110. iframeBase.style.overflowX = 'hidden';
  111. iframeBody.style.height = '100%';
  112. iframeBody.style.margin = '0';
  113. iframeBody.style.paddingLeft = paddingToCenterBody;
  114. iframeBody.style.paddingRight = paddingToCenterBody;
  115. });
  116. CKEDITOR.dialog.add("uploadimage",
  117. function(a) {
  118. return {
  119. title: "图片上传",
  120. minWidth: "660px",
  121. minHeight:"400px",
  122. contents: [{
  123. id: "tab1",
  124. label: "",
  125. title: "图片上传",
  126. expand: true,
  127. width: "420px",
  128. height: "",
  129. padding: 0,
  130. elements: [
  131. {
  132. type: "html",
  133. style: "width:100%;",
  134. html: '<div><input type="file" id="uploadImg" placeholder="请选择上传的图片" style="margin:10px 0px;"/></div>',
  135. onLoad: function(a) {
  136. CKEDITOR.document.getById(this.domId).on('click', function() {
  137. },this);
  138. }
  139. },
  140. {
  141. type: "html",
  142. style: "width:100%;",
  143. html:'<button style="border: 1px solid black;margin: 2px; padding: 2px;border-radius: 1px;background:dodgerblue;margin:10px 0px;width:60px;text-align: center;">上传</button>',
  144. onLoad: function(a) {
  145. CKEDITOR.document.getById(this.domId).on('click', function() {
  146. /*function getObjectURL(file) {
  147. var url = null ;
  148. if (window.createObjectURL!=undefined) { // basic
  149. url = window.createObjectURL(file) ;
  150. } else if (window.URL!=undefined) { // mozilla(firefox)
  151. url = window.URL.createObjectURL(file) ;
  152. } else if (window.webkitURL!=undefined) { // webkit or chrome
  153. url = window.webkitURL.createObjectURL(file) ;
  154. }
  155. return url ;
  156. };*/
  157. //var imgUrl=getObjectURL(CKEDITOR.document.getById("uploadImg").$.files[0]);
  158. var dialog = this.getDialog();
  159. if(dialog._.editor.upload){
  160. dialog._.editor.upload(CKEDITOR.document.getById("uploadImg").$.files[0]);
  161. }
  162. /*if(imgUrl){
  163. dialog._.editor.uploadImgUrl(imgUrl);
  164. console.log(backend.uploadImgUrl);
  165. }*/
  166. dialog.hide();
  167. //dialog._.editor.insertHtml('<p/><img src='+imgUrl+' /><p/>');
  168. //console.log(dialog._);
  169. //console.log(a);
  170. },this);
  171. }
  172. },
  173. /*
  174. {
  175. id:"uploadimage",
  176. type: "html",
  177. style: "width:100%;height:100px",
  178. html: '<p>This is some text and then: <a href="">Click me!</a></p>',
  179. onLoad: function(a) {
  180. CKEDITOR.document.getById(this.domId).on('click', function() {
  181. console.log(this.domId);
  182. console.log(this);
  183. var dialog = this.getDialog();
  184. dialog.hide();
  185. dialog._.editor.insertHtml(this.html);
  186. }, this);
  187. }
  188. },
  189. */
  190. ]
  191. }],
  192. onOk: function() {
  193. //console.log(a);
  194. },
  195. onShow: function () {
  196. //document.getElementById("uploadimage").setAttribute("src","/image/image.html?v=' +new Date().getSeconds() + '");
  197. }
  198. }
  199. })
  200. }
  201. });
  202. })();