@lingxiteam/lcdp-ueditor-react 1.0.0-alpha.9 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/es/LcdpUeditor.js +64 -61
  2. package/es/const.js +4 -4
  3. package/es/defaultConfig.json +76 -76
  4. package/es/tools/UeditorResourceLoader.js +11 -16
  5. package/es/tools/filterHtmlNode.d.ts +5 -0
  6. package/es/tools/filterHtmlNode.js +41 -0
  7. package/es/tools/loadScript.js +5 -7
  8. package/es/type.d.ts +6 -0
  9. package/lib/LcdpUeditor.js +18 -8
  10. package/lib/defaultConfig.json +76 -76
  11. package/lib/tools/filterHtmlNode.d.ts +5 -0
  12. package/lib/tools/filterHtmlNode.js +61 -0
  13. package/lib/type.d.ts +6 -0
  14. package/package.json +35 -34
  15. package/ueditor-resource/dialogs/anchor/anchor.html +62 -62
  16. package/ueditor-resource/dialogs/attachment/attachment.css +716 -716
  17. package/ueditor-resource/dialogs/attachment/attachment.html +61 -61
  18. package/ueditor-resource/dialogs/attachment/attachment.js +803 -803
  19. package/ueditor-resource/dialogs/audio/audio.css +879 -879
  20. package/ueditor-resource/dialogs/audio/audio.html +93 -93
  21. package/ueditor-resource/dialogs/audio/audio.js +815 -815
  22. package/ueditor-resource/dialogs/background/background.css +193 -193
  23. package/ueditor-resource/dialogs/background/background.html +59 -59
  24. package/ueditor-resource/dialogs/background/background.js +370 -370
  25. package/ueditor-resource/dialogs/contentimport/contentimport.html +176 -176
  26. package/ueditor-resource/dialogs/contentimport/contentimport.js +91 -91
  27. package/ueditor-resource/dialogs/emotion/emotion.css +129 -129
  28. package/ueditor-resource/dialogs/emotion/emotion.html +70 -70
  29. package/ueditor-resource/dialogs/emotion/emotion.js +186 -186
  30. package/ueditor-resource/dialogs/formula/formula.html +98 -98
  31. package/ueditor-resource/dialogs/formula/formula.js +147 -147
  32. package/ueditor-resource/dialogs/help/help.css +37 -37
  33. package/ueditor-resource/dialogs/help/help.html +82 -82
  34. package/ueditor-resource/dialogs/help/help.js +57 -57
  35. package/ueditor-resource/dialogs/image/image.css +768 -768
  36. package/ueditor-resource/dialogs/image/image.html +144 -144
  37. package/ueditor-resource/dialogs/image/image.js +1060 -1060
  38. package/ueditor-resource/dialogs/insertframe/insertframe.html +135 -135
  39. package/ueditor-resource/dialogs/internal.js +81 -81
  40. package/ueditor-resource/dialogs/link/link.html +148 -148
  41. package/ueditor-resource/dialogs/preview/preview.html +45 -45
  42. package/ueditor-resource/dialogs/scrawl/scrawl.css +324 -324
  43. package/ueditor-resource/dialogs/scrawl/scrawl.html +95 -95
  44. package/ueditor-resource/dialogs/scrawl/scrawl.js +682 -682
  45. package/ueditor-resource/dialogs/searchreplace/searchreplace.html +144 -144
  46. package/ueditor-resource/dialogs/searchreplace/searchreplace.js +174 -174
  47. package/ueditor-resource/dialogs/spechars/spechars.html +42 -42
  48. package/ueditor-resource/dialogs/spechars/spechars.js +86 -86
  49. package/ueditor-resource/dialogs/table/edittable.css +85 -85
  50. package/ueditor-resource/dialogs/table/edittable.html +69 -69
  51. package/ueditor-resource/dialogs/table/edittable.js +241 -241
  52. package/ueditor-resource/dialogs/table/edittd.html +62 -62
  53. package/ueditor-resource/dialogs/table/edittip.html +33 -33
  54. package/ueditor-resource/dialogs/template/config.js +42 -42
  55. package/ueditor-resource/dialogs/template/template.css +99 -99
  56. package/ueditor-resource/dialogs/template/template.html +26 -26
  57. package/ueditor-resource/dialogs/template/template.js +53 -53
  58. package/ueditor-resource/dialogs/video/video.css +909 -909
  59. package/ueditor-resource/dialogs/video/video.html +114 -114
  60. package/ueditor-resource/dialogs/video/video.js +867 -867
  61. package/ueditor-resource/dialogs/wordimage/wordimage.html +221 -221
  62. package/ueditor-resource/dialogs/wordimage/wordimage.js +93 -93
  63. package/ueditor-resource/lang/en/en.js +686 -686
  64. package/ueditor-resource/lang/zh-cn/zh-cn.js +748 -748
  65. package/ueditor-resource/lang/zh-tw/zh-tw.js +748 -748
  66. package/ueditor-resource/plugins/demo/demo.js +3 -3
  67. package/ueditor-resource/themes/default/css/ueditor.css +2148 -2148
  68. package/ueditor-resource/themes/default/dialog.css +17 -17
  69. package/ueditor-resource/themes/default/dialogbase.css +132 -132
  70. package/ueditor-resource/themes/default/exts/ai.svg +12 -12
  71. package/ueditor-resource/themes/default/exts/apk.svg +12 -12
  72. package/ueditor-resource/themes/default/exts/chm.svg +12 -12
  73. package/ueditor-resource/themes/default/exts/css.svg +12 -12
  74. package/ueditor-resource/themes/default/exts/doc.svg +22 -22
  75. package/ueditor-resource/themes/default/exts/docx.svg +22 -22
  76. package/ueditor-resource/themes/default/exts/dwg.svg +16 -16
  77. package/ueditor-resource/themes/default/exts/folder.svg +3 -3
  78. package/ueditor-resource/themes/default/exts/gif.svg +14 -14
  79. package/ueditor-resource/themes/default/exts/html.svg +12 -12
  80. package/ueditor-resource/themes/default/exts/jpeg.svg +14 -14
  81. package/ueditor-resource/themes/default/exts/jpg.svg +14 -14
  82. package/ueditor-resource/themes/default/exts/log.svg +12 -12
  83. package/ueditor-resource/themes/default/exts/mp3.svg +14 -14
  84. package/ueditor-resource/themes/default/exts/mp4.svg +12 -12
  85. package/ueditor-resource/themes/default/exts/pdf.svg +14 -14
  86. package/ueditor-resource/themes/default/exts/png.svg +14 -14
  87. package/ueditor-resource/themes/default/exts/ppt.svg +24 -24
  88. package/ueditor-resource/themes/default/exts/pptx.svg +24 -24
  89. package/ueditor-resource/themes/default/exts/psd.svg +12 -12
  90. package/ueditor-resource/themes/default/exts/rar.svg +12 -12
  91. package/ueditor-resource/themes/default/exts/svg.svg +12 -12
  92. package/ueditor-resource/themes/default/exts/torrent.svg +14 -14
  93. package/ueditor-resource/themes/default/exts/txt.svg +14 -14
  94. package/ueditor-resource/themes/default/exts/unknown.svg +12 -12
  95. package/ueditor-resource/themes/default/exts/xls.svg +25 -25
  96. package/ueditor-resource/themes/default/exts/xlsx.svg +25 -25
  97. package/ueditor-resource/themes/default/exts/zip.svg +12 -12
  98. package/ueditor-resource/themes/iframe.css +63 -63
  99. package/ueditor-resource/third-party/SyntaxHighlighter/shCore.js +3655 -3655
  100. package/ueditor-resource/third-party/clipboard/clipboard.js +752 -752
  101. package/ueditor-resource/third-party/codemirror/codemirror.css +106 -106
  102. package/ueditor-resource/third-party/codemirror/codemirror.js +3581 -3581
  103. package/ueditor-resource/third-party/jquery-3.5.1.js +1 -1
  104. package/ueditor-resource/third-party/jquery-3.5.1_1.js +4314 -4314
  105. package/ueditor-resource/third-party/webuploader/webuploader.css +88 -88
  106. package/ueditor-resource/third-party/webuploader/webuploader.js +3 -3
  107. package/ueditor-resource/third-party/zeroclipboard/ZeroClipboard.js +1255 -1255
  108. package/ueditor-resource/{lcdp-ueditor.all.js → ueditor.all.js} +5270 -5269
  109. package/ueditor-resource/ueditor.config.js +655 -655
  110. package/ueditor-resource/{lcdp-ueditor.parse.js → ueditor.parse.js} +13 -13
  111. package/ueditor-resource/index.html +0 -146
@@ -1,682 +1,682 @@
1
- /**
2
- * Created with JetBrains PhpStorm.
3
- * User: xuheng
4
- * Date: 12-5-22
5
- * Time: 上午11:38
6
- * To change this template use File | Settings | File Templates.
7
- */
8
- var scrawl = function (options) {
9
- options && this.initOptions(options);
10
- };
11
- (function () {
12
- var canvas = $G("J_brushBoard"),
13
- context = canvas.getContext('2d'),
14
- drawStep = [], //undo redo存储
15
- drawStepIndex = 0; //undo redo指针
16
-
17
- scrawl.prototype = {
18
- isScrawl: false, //是否涂鸦
19
- brushWidth: -1, //画笔粗细
20
- brushColor: "", //画笔颜色
21
-
22
- initOptions: function (options) {
23
- var me = this;
24
- me.originalState(options);//初始页面状态
25
- me._buildToolbarColor(options.colorList);//动态生成颜色选择集合
26
-
27
- me._addBoardListener(options.saveNum);//添加画板处理
28
- me._addOPerateListener(options.saveNum);//添加undo redo clearBoard处理
29
- me._addColorBarListener();//添加颜色选择处理
30
- me._addBrushBarListener();//添加画笔大小处理
31
- me._addEraserBarListener();//添加橡皮大小处理
32
- me._addAddImgListener();//添加增添背景图片处理
33
- me._addRemoveImgListenter();//删除背景图片处理
34
- me._addScalePicListenter();//添加缩放处理
35
- me._addClearSelectionListenter();//添加清楚选中状态处理
36
-
37
- me._originalColorSelect(options.drawBrushColor);//初始化颜色选中
38
- me._originalBrushSelect(options.drawBrushSize);//初始化画笔选中
39
- me._clearSelection();//清楚选中状态
40
- },
41
-
42
- originalState: function (options) {
43
- var me = this;
44
-
45
- me.brushWidth = options.drawBrushSize;//同步画笔粗细
46
- me.brushColor = options.drawBrushColor;//同步画笔颜色
47
-
48
- context.lineWidth = me.brushWidth;//初始画笔大小
49
- context.strokeStyle = me.brushColor;//初始画笔颜色
50
- context.fillStyle = "transparent";//初始画布背景颜色
51
- context.lineCap = "round";//去除锯齿
52
- context.fill();
53
- },
54
- _buildToolbarColor: function (colorList) {
55
- var tmp = null, arr = [];
56
- arr.push("<table id='J_colorList'>");
57
- for (var i = 0, color; color = colorList[i++];) {
58
- if ((i - 1) % 5 == 0) {
59
- if (i != 1) {
60
- arr.push("</tr>");
61
- }
62
- arr.push("<tr>");
63
- }
64
- tmp = '#' + color;
65
- arr.push("<td><a title='" + tmp + "' href='javascript:void(0)' style='background-color:" + tmp + "'></a></td>");
66
- }
67
- arr.push("</tr></table>");
68
- $G("J_colorBar").innerHTML = arr.join("");
69
- },
70
-
71
- _addBoardListener: function (saveNum) {
72
- var me = this,
73
- margin = 0,
74
- startX = -1,
75
- startY = -1,
76
- isMouseDown = false,
77
- isMouseMove = false,
78
- isMouseUp = false,
79
- buttonPress = 0, button, flag = '';
80
-
81
- margin = parseInt(domUtils.getComputedStyle($G("J_wrap"), "margin-left"));
82
- drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
83
- drawStepIndex += 1;
84
-
85
- domUtils.on(canvas, ["mousedown", "mousemove", "mouseup", "mouseout"], function (e) {
86
- button = browser.webkit ? e.which : buttonPress;
87
- switch (e.type) {
88
- case 'mousedown':
89
- buttonPress = 1;
90
- flag = 1;
91
- isMouseDown = true;
92
- isMouseUp = false;
93
- isMouseMove = false;
94
- me.isScrawl = true;
95
- startX = e.clientX - margin;//10为外边距总和
96
- startY = e.clientY - margin;
97
- context.beginPath();
98
- break;
99
- case 'mousemove' :
100
- if (!flag && button == 0) {
101
- return;
102
- }
103
- if (!flag && button) {
104
- startX = e.clientX - margin;//10为外边距总和
105
- startY = e.clientY - margin;
106
- context.beginPath();
107
- flag = 1;
108
- }
109
- if (isMouseUp || !isMouseDown) {
110
- return;
111
- }
112
- var endX = e.clientX - margin,
113
- endY = e.clientY - margin;
114
-
115
- context.moveTo(startX, startY);
116
- context.lineTo(endX, endY);
117
- context.stroke();
118
- startX = endX;
119
- startY = endY;
120
- isMouseMove = true;
121
- break;
122
- case 'mouseup':
123
- buttonPress = 0;
124
- if (!isMouseDown) return;
125
- if (!isMouseMove) {
126
- context.arc(startX, startY, context.lineWidth, 0, Math.PI * 2, false);
127
- context.fillStyle = context.strokeStyle;
128
- context.fill();
129
- }
130
- context.closePath();
131
- me._saveOPerate(saveNum);
132
- isMouseDown = false;
133
- isMouseMove = false;
134
- isMouseUp = true;
135
- startX = -1;
136
- startY = -1;
137
- break;
138
- case 'mouseout':
139
- flag = '';
140
- buttonPress = 0;
141
- if (button == 1) return;
142
- context.closePath();
143
- break;
144
- }
145
- });
146
- },
147
- _addOPerateListener: function (saveNum) {
148
- var me = this;
149
- domUtils.on($G("J_previousStep"), "click", function () {
150
- if (drawStepIndex > 1) {
151
- drawStepIndex -= 1;
152
- context.clearRect(0, 0, context.canvas.width, context.canvas.height);
153
- context.putImageData(drawStep[drawStepIndex - 1], 0, 0);
154
- me.btn2Highlight("J_nextStep");
155
- drawStepIndex == 1 && me.btn2disable("J_previousStep");
156
- }
157
- });
158
- domUtils.on($G("J_nextStep"), "click", function () {
159
- if (drawStepIndex > 0 && drawStepIndex < drawStep.length) {
160
- context.clearRect(0, 0, context.canvas.width, context.canvas.height);
161
- context.putImageData(drawStep[drawStepIndex], 0, 0);
162
- drawStepIndex += 1;
163
- me.btn2Highlight("J_previousStep");
164
- drawStepIndex == drawStep.length && me.btn2disable("J_nextStep");
165
- }
166
- });
167
- domUtils.on($G("J_clearBoard"), "click", function () {
168
- context.clearRect(0, 0, context.canvas.width, context.canvas.height);
169
- drawStep = [];
170
- me._saveOPerate(saveNum);
171
- drawStepIndex = 1;
172
- me.isScrawl = false;
173
- me.btn2disable("J_previousStep");
174
- me.btn2disable("J_nextStep");
175
- me.btn2disable("J_clearBoard");
176
- });
177
- },
178
- _addColorBarListener: function () {
179
- var me = this;
180
- domUtils.on($G("J_colorBar"), "click", function (e) {
181
- var target = me.getTarget(e),
182
- color = target.title;
183
- if (!!color) {
184
- me._addColorSelect(target);
185
-
186
- me.brushColor = color;
187
- context.globalCompositeOperation = "source-over";
188
- context.lineWidth = me.brushWidth;
189
- context.strokeStyle = color;
190
- }
191
- });
192
- },
193
- _addBrushBarListener: function () {
194
- var me = this;
195
- domUtils.on($G("J_brushBar"), "click", function (e) {
196
- var target = me.getTarget(e),
197
- size = browser.ie ? target.innerText : target.text;
198
- if (!!size) {
199
- me._addBESelect(target);
200
-
201
- context.globalCompositeOperation = "source-over";
202
- context.lineWidth = parseInt(size);
203
- context.strokeStyle = me.brushColor;
204
- me.brushWidth = context.lineWidth;
205
- }
206
- });
207
- },
208
- _addEraserBarListener: function () {
209
- var me = this;
210
- domUtils.on($G("J_eraserBar"), "click", function (e) {
211
- var target = me.getTarget(e),
212
- size = browser.ie ? target.innerText : target.text;
213
- if (!!size) {
214
- me._addBESelect(target);
215
-
216
- context.lineWidth = parseInt(size);
217
- context.globalCompositeOperation = "destination-out";
218
- context.strokeStyle = "#FFF";
219
- }
220
- });
221
- },
222
- _addAddImgListener: function () {
223
- var file = $G("J_imgTxt");
224
- if (!window.FileReader) {
225
- $G("J_addImg").style.display = 'none';
226
- $G("J_removeImg").style.display = 'none';
227
- $G("J_sacleBoard").style.display = 'none';
228
- }
229
- domUtils.on(file, "change", function (e) {
230
- var frm = file.parentNode;
231
- addMaskLayer(lang.backgroundUploading);
232
-
233
- var target = e.target || e.srcElement,
234
- reader = new FileReader();
235
- reader.onload = function (evt) {
236
- var target = evt.target || evt.srcElement;
237
- ue_callback(target.result, 'SUCCESS');
238
- };
239
- reader.readAsDataURL(target.files[0]);
240
- frm.reset();
241
- });
242
- },
243
- _addRemoveImgListenter: function () {
244
- var me = this;
245
- domUtils.on($G("J_removeImg"), "click", function () {
246
- $G("J_picBoard").innerHTML = "";
247
- me.btn2disable("J_removeImg");
248
- me.btn2disable("J_sacleBoard");
249
- });
250
- },
251
- _addScalePicListenter: function () {
252
- domUtils.on($G("J_sacleBoard"), "click", function () {
253
- var picBoard = $G("J_picBoard"),
254
- scaleCon = $G("J_scaleCon"),
255
- img = picBoard.children[0];
256
-
257
- if (img) {
258
- if (!scaleCon) {
259
- picBoard.style.cssText = "position:relative;z-index:999;" + picBoard.style.cssText;
260
- img.style.cssText = "position: absolute;top:" + (canvas.height - img.height) / 2 + "px;left:" + (canvas.width - img.width) / 2 + "px;";
261
- var scale = new ScaleBoy();
262
- picBoard.appendChild(scale.init());
263
- scale.startScale(img);
264
- } else {
265
- if (scaleCon.style.visibility == "visible") {
266
- scaleCon.style.visibility = "hidden";
267
- picBoard.style.position = "";
268
- picBoard.style.zIndex = "";
269
- } else {
270
- scaleCon.style.visibility = "visible";
271
- picBoard.style.cssText += "position:relative;z-index:999";
272
- }
273
- }
274
- }
275
- });
276
- },
277
- _addClearSelectionListenter: function () {
278
- var doc = document;
279
- domUtils.on(doc, 'mousemove', function (e) {
280
- if (browser.ie && browser.version < 11)
281
- doc.selection.clear();
282
- else
283
- window.getSelection().removeAllRanges();
284
- });
285
- },
286
- _clearSelection: function () {
287
- var list = ["J_operateBar", "J_colorBar", "J_brushBar", "J_eraserBar", "J_picBoard"];
288
- for (var i = 0, group; group = list[i++];) {
289
- domUtils.unSelectable($G(group));
290
- }
291
- },
292
-
293
- _saveOPerate: function (saveNum) {
294
- var me = this;
295
- if (drawStep.length <= saveNum) {
296
- if (drawStepIndex < drawStep.length) {
297
- me.btn2disable("J_nextStep");
298
- drawStep.splice(drawStepIndex);
299
- }
300
- drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
301
- drawStepIndex = drawStep.length;
302
- } else {
303
- drawStep.shift();
304
- drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
305
- drawStepIndex = drawStep.length;
306
- }
307
- me.btn2Highlight("J_previousStep");
308
- me.btn2Highlight("J_clearBoard");
309
- },
310
-
311
- _originalColorSelect: function (title) {
312
- var colorList = $G("J_colorList").getElementsByTagName("td");
313
- for (var j = 0, cell; cell = colorList[j++];) {
314
- if (cell.children[0].title.toLowerCase() == title) {
315
- cell.children[0].style.opacity = 1;
316
- }
317
- }
318
- },
319
- _originalBrushSelect: function (text) {
320
- var brushList = $G("J_brushBar").children;
321
- for (var i = 0, ele; ele = brushList[i++];) {
322
- if (ele.tagName.toLowerCase() == "a") {
323
- var size = browser.ie ? ele.innerText : ele.text;
324
- if (size.toLowerCase() == text) {
325
- ele.style.opacity = 1;
326
- }
327
- }
328
- }
329
- },
330
- _addColorSelect: function (target) {
331
- var me = this,
332
- colorList = $G("J_colorList").getElementsByTagName("td"),
333
- eraserList = $G("J_eraserBar").children,
334
- brushList = $G("J_brushBar").children;
335
-
336
- for (var i = 0, cell; cell = colorList[i++];) {
337
- cell.children[0].style.opacity = 0.3;
338
- }
339
- for (var k = 0, ele; ele = brushList[k++];) {
340
- if (ele.tagName.toLowerCase() == "a") {
341
- ele.style.opacity = 0.3;
342
- var size = browser.ie ? ele.innerText : ele.text;
343
- if (size.toLowerCase() == this.brushWidth) {
344
- ele.style.opacity = 1;
345
- }
346
- }
347
- }
348
- for (var j = 0, node; node = eraserList[j++];) {
349
- if (node.tagName.toLowerCase() == "a") {
350
- node.style.opacity = 0.3;
351
- }
352
- }
353
-
354
- target.style.opacity = 1;
355
- target.blur();
356
- },
357
- _addBESelect: function (target) {
358
- var brushList = $G("J_brushBar").children;
359
- var eraserList = $G("J_eraserBar").children;
360
-
361
- for (var i = 0, ele; ele = brushList[i++];) {
362
- if (ele.tagName.toLowerCase() == "a") {
363
- ele.style.opacity = 0.3;
364
- }
365
- }
366
- for (var j = 0, node; node = eraserList[j++];) {
367
- if (node.tagName.toLowerCase() == "a") {
368
- node.style.opacity = 0.3;
369
- }
370
- }
371
-
372
- target.style.opacity = 1;
373
- target.blur();
374
- },
375
- getCanvasData: function () {
376
- var picContainer = $G("J_picBoard"),
377
- img = picContainer.children[0];
378
- if (img) {
379
- var x, y;
380
- if (img.style.position == "absolute") {
381
- x = parseInt(img.style.left);
382
- y = parseInt(img.style.top);
383
- } else {
384
- x = (picContainer.offsetWidth - img.width) / 2;
385
- y = (picContainer.offsetHeight - img.height) / 2;
386
- }
387
- context.globalCompositeOperation = "destination-over";
388
- context.drawImage(img, x, y, img.width, img.height);
389
- } else {
390
- context.globalCompositeOperation = "destination-atop";
391
- context.fillStyle = "#fff";//重置画布背景白色
392
- context.fillRect(0, 0, canvas.width, canvas.height);
393
- }
394
- try {
395
- return canvas.toDataURL("image/png").substring(22);
396
- } catch (e) {
397
- return "";
398
- }
399
- },
400
- btn2Highlight: function (id) {
401
- var cur = $G(id);
402
- cur.className.indexOf("H") == -1 && (cur.className += "H");
403
- },
404
- btn2disable: function (id) {
405
- var cur = $G(id);
406
- cur.className.indexOf("H") != -1 && (cur.className = cur.className.replace("H", ""));
407
- },
408
- getTarget: function (evt) {
409
- return evt.target || evt.srcElement;
410
- }
411
- };
412
- })();
413
-
414
- var ScaleBoy = function () {
415
- this.dom = null;
416
- this.scalingElement = null;
417
- };
418
- (function () {
419
- function _appendStyle() {
420
- var doc = document,
421
- head = doc.getElementsByTagName('head')[0],
422
- style = doc.createElement('style'),
423
- cssText = '.scale{visibility:hidden;cursor:move;position:absolute;left:0;top:0;width:100px;height:50px;background-color:#fff;font-size:0;line-height:0;opacity:.4;filter:Alpha(opacity=40);}'
424
- + '.scale span{position:absolute;left:0;top:0;width:6px;height:6px;background-color:#006DAE;}'
425
- + '.scale .hand0, .scale .hand7{cursor:nw-resize;}'
426
- + '.scale .hand1, .scale .hand6{left:50%;margin-left:-3px;cursor:n-resize;}'
427
- + '.scale .hand2, .scale .hand4, .scale .hand7{left:100%;margin-left:-6px;}'
428
- + '.scale .hand3, .scale .hand4{top:50%;margin-top:-3px;cursor:w-resize;}'
429
- + '.scale .hand5, .scale .hand6, .scale .hand7{margin-top:-6px;top:100%;}'
430
- + '.scale .hand2, .scale .hand5{cursor:ne-resize;}';
431
- style.type = 'text/css';
432
-
433
- try {
434
- style.appendChild(doc.createTextNode(cssText));
435
- } catch (e) {
436
- style.styleSheet.cssText = cssText;
437
- }
438
- head.appendChild(style);
439
- }
440
-
441
- function _getDom() {
442
- var doc = document,
443
- hand,
444
- arr = [],
445
- scale = doc.createElement('div');
446
-
447
- scale.id = 'J_scaleCon';
448
- scale.className = 'scale';
449
- for (var i = 0; i < 8; i++) {
450
- arr.push("<span class='hand" + i + "'></span>");
451
- }
452
- scale.innerHTML = arr.join("");
453
- return scale;
454
- }
455
-
456
- var rect = [
457
- //[left, top, width, height]
458
- [1, 1, -1, -1],
459
- [0, 1, 0, -1],
460
- [0, 1, 1, -1],
461
- [1, 0, -1, 0],
462
- [0, 0, 1, 0],
463
- [1, 0, -1, 1],
464
- [0, 0, 0, 1],
465
- [0, 0, 1, 1]
466
- ];
467
- ScaleBoy.prototype = {
468
- init: function () {
469
- _appendStyle();
470
- var me = this,
471
- scale = me.dom = _getDom();
472
-
473
- me.scaleMousemove.fp = me;
474
- domUtils.on(scale, 'mousedown', function (e) {
475
- var target = e.target || e.srcElement;
476
- me.start = {x: e.clientX, y: e.clientY};
477
- if (target.className.indexOf('hand') != -1) {
478
- me.dir = target.className.replace('hand', '');
479
- }
480
- domUtils.on(document.body, 'mousemove', me.scaleMousemove);
481
- e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
482
- });
483
- domUtils.on(document.body, 'mouseup', function (e) {
484
- if (me.start) {
485
- domUtils.un(document.body, 'mousemove', me.scaleMousemove);
486
- if (me.moved) {
487
- me.updateScaledElement({
488
- position: {x: scale.style.left, y: scale.style.top},
489
- size: {w: scale.style.width, h: scale.style.height}
490
- });
491
- }
492
- delete me.start;
493
- delete me.moved;
494
- delete me.dir;
495
- }
496
- });
497
- return scale;
498
- },
499
- startScale: function (objElement) {
500
- var me = this, Idom = me.dom;
501
-
502
- Idom.style.cssText = 'visibility:visible;top:' + objElement.style.top + ';left:' + objElement.style.left + ';width:' + objElement.offsetWidth + 'px;height:' + objElement.offsetHeight + 'px;';
503
- me.scalingElement = objElement;
504
- },
505
- updateScaledElement: function (objStyle) {
506
- var cur = this.scalingElement,
507
- pos = objStyle.position,
508
- size = objStyle.size;
509
- if (pos) {
510
- typeof pos.x != 'undefined' && (cur.style.left = pos.x);
511
- typeof pos.y != 'undefined' && (cur.style.top = pos.y);
512
- }
513
- if (size) {
514
- size.w && (cur.style.width = size.w);
515
- size.h && (cur.style.height = size.h);
516
- }
517
- },
518
- updateStyleByDir: function (dir, offset) {
519
- var me = this,
520
- dom = me.dom, tmp;
521
-
522
- rect['def'] = [1, 1, 0, 0];
523
- if (rect[dir][0] != 0) {
524
- tmp = parseInt(dom.style.left) + offset.x;
525
- dom.style.left = me._validScaledProp('left', tmp) + 'px';
526
- }
527
- if (rect[dir][1] != 0) {
528
- tmp = parseInt(dom.style.top) + offset.y;
529
- dom.style.top = me._validScaledProp('top', tmp) + 'px';
530
- }
531
- if (rect[dir][2] != 0) {
532
- tmp = dom.clientWidth + rect[dir][2] * offset.x;
533
- dom.style.width = me._validScaledProp('width', tmp) + 'px';
534
- }
535
- if (rect[dir][3] != 0) {
536
- tmp = dom.clientHeight + rect[dir][3] * offset.y;
537
- dom.style.height = me._validScaledProp('height', tmp) + 'px';
538
- }
539
- if (dir === 'def') {
540
- me.updateScaledElement({position: {x: dom.style.left, y: dom.style.top}});
541
- }
542
- },
543
- scaleMousemove: function (e) {
544
- var me = arguments.callee.fp,
545
- start = me.start,
546
- dir = me.dir || 'def',
547
- offset = {x: e.clientX - start.x, y: e.clientY - start.y};
548
-
549
- me.updateStyleByDir(dir, offset);
550
- arguments.callee.fp.start = {x: e.clientX, y: e.clientY};
551
- arguments.callee.fp.moved = 1;
552
- },
553
- _validScaledProp: function (prop, value) {
554
- var ele = this.dom,
555
- wrap = $G("J_picBoard");
556
-
557
- value = isNaN(value) ? 0 : value;
558
- switch (prop) {
559
- case 'left':
560
- return value < 0 ? 0 : (value + ele.clientWidth) > wrap.clientWidth ? wrap.clientWidth - ele.clientWidth : value;
561
- case 'top':
562
- return value < 0 ? 0 : (value + ele.clientHeight) > wrap.clientHeight ? wrap.clientHeight - ele.clientHeight : value;
563
- case 'width':
564
- return value <= 0 ? 1 : (value + ele.offsetLeft) > wrap.clientWidth ? wrap.clientWidth - ele.offsetLeft : value;
565
- case 'height':
566
- return value <= 0 ? 1 : (value + ele.offsetTop) > wrap.clientHeight ? wrap.clientHeight - ele.offsetTop : value;
567
- }
568
- }
569
- };
570
- })();
571
-
572
- //后台回调
573
- function ue_callback(url, state) {
574
- var doc = document,
575
- picBorard = $G("J_picBoard"),
576
- img = doc.createElement("img");
577
-
578
- //图片缩放
579
- function scale(img, max, oWidth, oHeight) {
580
- var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
581
- if (ow > max || oh > max) {
582
- if (ow >= oh) {
583
- if (width = ow - max) {
584
- percent = (width / ow).toFixed(2);
585
- img.height = oh - oh * percent;
586
- img.width = max;
587
- }
588
- } else {
589
- if (height = oh - max) {
590
- percent = (height / oh).toFixed(2);
591
- img.width = ow - ow * percent;
592
- img.height = max;
593
- }
594
- }
595
- }
596
- }
597
-
598
- //移除遮罩层
599
- removeMaskLayer();
600
- //状态响应
601
- if (state == "SUCCESS") {
602
- picBorard.innerHTML = "";
603
- img.onload = function () {
604
- scale(this, 300);
605
- picBorard.appendChild(img);
606
-
607
- var obj = new scrawl();
608
- obj.btn2Highlight("J_removeImg");
609
- //trace 2457
610
- obj.btn2Highlight("J_sacleBoard");
611
- };
612
- img.src = url;
613
- } else {
614
- alert(state);
615
- }
616
- }
617
-
618
- //去掉遮罩层
619
- function removeMaskLayer() {
620
- var maskLayer = $G("J_maskLayer");
621
- maskLayer.className = "maskLayerNull";
622
- maskLayer.innerHTML = "";
623
- dialog.buttons[0].setDisabled(false);
624
- }
625
-
626
- //添加遮罩层
627
- function addMaskLayer(html) {
628
- var maskLayer = $G("J_maskLayer");
629
- dialog.buttons[0].setDisabled(true);
630
- maskLayer.className = "maskLayer";
631
- maskLayer.innerHTML = html;
632
- }
633
-
634
- //执行确认按钮方法
635
- function exec(scrawlObj) {
636
- if (scrawlObj.isScrawl) {
637
- addMaskLayer(lang.scrawlUpLoading);
638
- var base64 = scrawlObj.getCanvasData();
639
- if (!!base64) {
640
- var options = {
641
- timeout: 100000,
642
- headers: editor.options.serverHeaders || {},
643
- onsuccess: function (xhr) {
644
- if (!scrawlObj.isCancelScrawl) {
645
- var responseObj;
646
- responseObj = eval("(" + xhr.responseText + ")");
647
- if (responseObj.state === "SUCCESS") {
648
- var imgObj = {},
649
- url = editor.options.scrawlUrlPrefix + responseObj.url;
650
- imgObj.src = url;
651
- imgObj._src = url;
652
- imgObj.alt = responseObj.original || '';
653
- editor.execCommand("insertImage", imgObj);
654
- dialog.close();
655
- // 触发上传涂鸦事件
656
- editor.fireEvent("uploadsuccess", {
657
- res: responseObj,
658
- type: 'scrawl'
659
- });
660
- } else {
661
- alert(responseObj.state);
662
- }
663
-
664
- }
665
- },
666
- onerror: function () {
667
- alert(lang.imageError);
668
- dialog.close();
669
- }
670
- };
671
- options[editor.getOpt('scrawlFieldName')] = base64;
672
-
673
- var actionUrl = editor.getActionUrl(editor.getOpt('scrawlActionName')),
674
- params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
675
- url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?' : '&') + params);
676
- ajax.request(url, options);
677
- }
678
- } else {
679
- addMaskLayer(lang.noScarwl + "&nbsp;&nbsp;&nbsp;<input type='button' value='" + lang.continueBtn + "' onclick='removeMaskLayer()'/>");
680
- }
681
- }
682
-
1
+ /**
2
+ * Created with JetBrains PhpStorm.
3
+ * User: xuheng
4
+ * Date: 12-5-22
5
+ * Time: 上午11:38
6
+ * To change this template use File | Settings | File Templates.
7
+ */
8
+ var scrawl = function (options) {
9
+ options && this.initOptions(options);
10
+ };
11
+ (function () {
12
+ var canvas = $G("J_brushBoard"),
13
+ context = canvas.getContext('2d'),
14
+ drawStep = [], //undo redo存储
15
+ drawStepIndex = 0; //undo redo指针
16
+
17
+ scrawl.prototype = {
18
+ isScrawl: false, //是否涂鸦
19
+ brushWidth: -1, //画笔粗细
20
+ brushColor: "", //画笔颜色
21
+
22
+ initOptions: function (options) {
23
+ var me = this;
24
+ me.originalState(options);//初始页面状态
25
+ me._buildToolbarColor(options.colorList);//动态生成颜色选择集合
26
+
27
+ me._addBoardListener(options.saveNum);//添加画板处理
28
+ me._addOPerateListener(options.saveNum);//添加undo redo clearBoard处理
29
+ me._addColorBarListener();//添加颜色选择处理
30
+ me._addBrushBarListener();//添加画笔大小处理
31
+ me._addEraserBarListener();//添加橡皮大小处理
32
+ me._addAddImgListener();//添加增添背景图片处理
33
+ me._addRemoveImgListenter();//删除背景图片处理
34
+ me._addScalePicListenter();//添加缩放处理
35
+ me._addClearSelectionListenter();//添加清楚选中状态处理
36
+
37
+ me._originalColorSelect(options.drawBrushColor);//初始化颜色选中
38
+ me._originalBrushSelect(options.drawBrushSize);//初始化画笔选中
39
+ me._clearSelection();//清楚选中状态
40
+ },
41
+
42
+ originalState: function (options) {
43
+ var me = this;
44
+
45
+ me.brushWidth = options.drawBrushSize;//同步画笔粗细
46
+ me.brushColor = options.drawBrushColor;//同步画笔颜色
47
+
48
+ context.lineWidth = me.brushWidth;//初始画笔大小
49
+ context.strokeStyle = me.brushColor;//初始画笔颜色
50
+ context.fillStyle = "transparent";//初始画布背景颜色
51
+ context.lineCap = "round";//去除锯齿
52
+ context.fill();
53
+ },
54
+ _buildToolbarColor: function (colorList) {
55
+ var tmp = null, arr = [];
56
+ arr.push("<table id='J_colorList'>");
57
+ for (var i = 0, color; color = colorList[i++];) {
58
+ if ((i - 1) % 5 == 0) {
59
+ if (i != 1) {
60
+ arr.push("</tr>");
61
+ }
62
+ arr.push("<tr>");
63
+ }
64
+ tmp = '#' + color;
65
+ arr.push("<td><a title='" + tmp + "' href='javascript:void(0)' style='background-color:" + tmp + "'></a></td>");
66
+ }
67
+ arr.push("</tr></table>");
68
+ $G("J_colorBar").innerHTML = arr.join("");
69
+ },
70
+
71
+ _addBoardListener: function (saveNum) {
72
+ var me = this,
73
+ margin = 0,
74
+ startX = -1,
75
+ startY = -1,
76
+ isMouseDown = false,
77
+ isMouseMove = false,
78
+ isMouseUp = false,
79
+ buttonPress = 0, button, flag = '';
80
+
81
+ margin = parseInt(domUtils.getComputedStyle($G("J_wrap"), "margin-left"));
82
+ drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
83
+ drawStepIndex += 1;
84
+
85
+ domUtils.on(canvas, ["mousedown", "mousemove", "mouseup", "mouseout"], function (e) {
86
+ button = browser.webkit ? e.which : buttonPress;
87
+ switch (e.type) {
88
+ case 'mousedown':
89
+ buttonPress = 1;
90
+ flag = 1;
91
+ isMouseDown = true;
92
+ isMouseUp = false;
93
+ isMouseMove = false;
94
+ me.isScrawl = true;
95
+ startX = e.clientX - margin;//10为外边距总和
96
+ startY = e.clientY - margin;
97
+ context.beginPath();
98
+ break;
99
+ case 'mousemove' :
100
+ if (!flag && button == 0) {
101
+ return;
102
+ }
103
+ if (!flag && button) {
104
+ startX = e.clientX - margin;//10为外边距总和
105
+ startY = e.clientY - margin;
106
+ context.beginPath();
107
+ flag = 1;
108
+ }
109
+ if (isMouseUp || !isMouseDown) {
110
+ return;
111
+ }
112
+ var endX = e.clientX - margin,
113
+ endY = e.clientY - margin;
114
+
115
+ context.moveTo(startX, startY);
116
+ context.lineTo(endX, endY);
117
+ context.stroke();
118
+ startX = endX;
119
+ startY = endY;
120
+ isMouseMove = true;
121
+ break;
122
+ case 'mouseup':
123
+ buttonPress = 0;
124
+ if (!isMouseDown) return;
125
+ if (!isMouseMove) {
126
+ context.arc(startX, startY, context.lineWidth, 0, Math.PI * 2, false);
127
+ context.fillStyle = context.strokeStyle;
128
+ context.fill();
129
+ }
130
+ context.closePath();
131
+ me._saveOPerate(saveNum);
132
+ isMouseDown = false;
133
+ isMouseMove = false;
134
+ isMouseUp = true;
135
+ startX = -1;
136
+ startY = -1;
137
+ break;
138
+ case 'mouseout':
139
+ flag = '';
140
+ buttonPress = 0;
141
+ if (button == 1) return;
142
+ context.closePath();
143
+ break;
144
+ }
145
+ });
146
+ },
147
+ _addOPerateListener: function (saveNum) {
148
+ var me = this;
149
+ domUtils.on($G("J_previousStep"), "click", function () {
150
+ if (drawStepIndex > 1) {
151
+ drawStepIndex -= 1;
152
+ context.clearRect(0, 0, context.canvas.width, context.canvas.height);
153
+ context.putImageData(drawStep[drawStepIndex - 1], 0, 0);
154
+ me.btn2Highlight("J_nextStep");
155
+ drawStepIndex == 1 && me.btn2disable("J_previousStep");
156
+ }
157
+ });
158
+ domUtils.on($G("J_nextStep"), "click", function () {
159
+ if (drawStepIndex > 0 && drawStepIndex < drawStep.length) {
160
+ context.clearRect(0, 0, context.canvas.width, context.canvas.height);
161
+ context.putImageData(drawStep[drawStepIndex], 0, 0);
162
+ drawStepIndex += 1;
163
+ me.btn2Highlight("J_previousStep");
164
+ drawStepIndex == drawStep.length && me.btn2disable("J_nextStep");
165
+ }
166
+ });
167
+ domUtils.on($G("J_clearBoard"), "click", function () {
168
+ context.clearRect(0, 0, context.canvas.width, context.canvas.height);
169
+ drawStep = [];
170
+ me._saveOPerate(saveNum);
171
+ drawStepIndex = 1;
172
+ me.isScrawl = false;
173
+ me.btn2disable("J_previousStep");
174
+ me.btn2disable("J_nextStep");
175
+ me.btn2disable("J_clearBoard");
176
+ });
177
+ },
178
+ _addColorBarListener: function () {
179
+ var me = this;
180
+ domUtils.on($G("J_colorBar"), "click", function (e) {
181
+ var target = me.getTarget(e),
182
+ color = target.title;
183
+ if (!!color) {
184
+ me._addColorSelect(target);
185
+
186
+ me.brushColor = color;
187
+ context.globalCompositeOperation = "source-over";
188
+ context.lineWidth = me.brushWidth;
189
+ context.strokeStyle = color;
190
+ }
191
+ });
192
+ },
193
+ _addBrushBarListener: function () {
194
+ var me = this;
195
+ domUtils.on($G("J_brushBar"), "click", function (e) {
196
+ var target = me.getTarget(e),
197
+ size = browser.ie ? target.innerText : target.text;
198
+ if (!!size) {
199
+ me._addBESelect(target);
200
+
201
+ context.globalCompositeOperation = "source-over";
202
+ context.lineWidth = parseInt(size);
203
+ context.strokeStyle = me.brushColor;
204
+ me.brushWidth = context.lineWidth;
205
+ }
206
+ });
207
+ },
208
+ _addEraserBarListener: function () {
209
+ var me = this;
210
+ domUtils.on($G("J_eraserBar"), "click", function (e) {
211
+ var target = me.getTarget(e),
212
+ size = browser.ie ? target.innerText : target.text;
213
+ if (!!size) {
214
+ me._addBESelect(target);
215
+
216
+ context.lineWidth = parseInt(size);
217
+ context.globalCompositeOperation = "destination-out";
218
+ context.strokeStyle = "#FFF";
219
+ }
220
+ });
221
+ },
222
+ _addAddImgListener: function () {
223
+ var file = $G("J_imgTxt");
224
+ if (!window.FileReader) {
225
+ $G("J_addImg").style.display = 'none';
226
+ $G("J_removeImg").style.display = 'none';
227
+ $G("J_sacleBoard").style.display = 'none';
228
+ }
229
+ domUtils.on(file, "change", function (e) {
230
+ var frm = file.parentNode;
231
+ addMaskLayer(lang.backgroundUploading);
232
+
233
+ var target = e.target || e.srcElement,
234
+ reader = new FileReader();
235
+ reader.onload = function (evt) {
236
+ var target = evt.target || evt.srcElement;
237
+ ue_callback(target.result, 'SUCCESS');
238
+ };
239
+ reader.readAsDataURL(target.files[0]);
240
+ frm.reset();
241
+ });
242
+ },
243
+ _addRemoveImgListenter: function () {
244
+ var me = this;
245
+ domUtils.on($G("J_removeImg"), "click", function () {
246
+ $G("J_picBoard").innerHTML = "";
247
+ me.btn2disable("J_removeImg");
248
+ me.btn2disable("J_sacleBoard");
249
+ });
250
+ },
251
+ _addScalePicListenter: function () {
252
+ domUtils.on($G("J_sacleBoard"), "click", function () {
253
+ var picBoard = $G("J_picBoard"),
254
+ scaleCon = $G("J_scaleCon"),
255
+ img = picBoard.children[0];
256
+
257
+ if (img) {
258
+ if (!scaleCon) {
259
+ picBoard.style.cssText = "position:relative;z-index:999;" + picBoard.style.cssText;
260
+ img.style.cssText = "position: absolute;top:" + (canvas.height - img.height) / 2 + "px;left:" + (canvas.width - img.width) / 2 + "px;";
261
+ var scale = new ScaleBoy();
262
+ picBoard.appendChild(scale.init());
263
+ scale.startScale(img);
264
+ } else {
265
+ if (scaleCon.style.visibility == "visible") {
266
+ scaleCon.style.visibility = "hidden";
267
+ picBoard.style.position = "";
268
+ picBoard.style.zIndex = "";
269
+ } else {
270
+ scaleCon.style.visibility = "visible";
271
+ picBoard.style.cssText += "position:relative;z-index:999";
272
+ }
273
+ }
274
+ }
275
+ });
276
+ },
277
+ _addClearSelectionListenter: function () {
278
+ var doc = document;
279
+ domUtils.on(doc, 'mousemove', function (e) {
280
+ if (browser.ie && browser.version < 11)
281
+ doc.selection.clear();
282
+ else
283
+ window.getSelection().removeAllRanges();
284
+ });
285
+ },
286
+ _clearSelection: function () {
287
+ var list = ["J_operateBar", "J_colorBar", "J_brushBar", "J_eraserBar", "J_picBoard"];
288
+ for (var i = 0, group; group = list[i++];) {
289
+ domUtils.unSelectable($G(group));
290
+ }
291
+ },
292
+
293
+ _saveOPerate: function (saveNum) {
294
+ var me = this;
295
+ if (drawStep.length <= saveNum) {
296
+ if (drawStepIndex < drawStep.length) {
297
+ me.btn2disable("J_nextStep");
298
+ drawStep.splice(drawStepIndex);
299
+ }
300
+ drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
301
+ drawStepIndex = drawStep.length;
302
+ } else {
303
+ drawStep.shift();
304
+ drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
305
+ drawStepIndex = drawStep.length;
306
+ }
307
+ me.btn2Highlight("J_previousStep");
308
+ me.btn2Highlight("J_clearBoard");
309
+ },
310
+
311
+ _originalColorSelect: function (title) {
312
+ var colorList = $G("J_colorList").getElementsByTagName("td");
313
+ for (var j = 0, cell; cell = colorList[j++];) {
314
+ if (cell.children[0].title.toLowerCase() == title) {
315
+ cell.children[0].style.opacity = 1;
316
+ }
317
+ }
318
+ },
319
+ _originalBrushSelect: function (text) {
320
+ var brushList = $G("J_brushBar").children;
321
+ for (var i = 0, ele; ele = brushList[i++];) {
322
+ if (ele.tagName.toLowerCase() == "a") {
323
+ var size = browser.ie ? ele.innerText : ele.text;
324
+ if (size.toLowerCase() == text) {
325
+ ele.style.opacity = 1;
326
+ }
327
+ }
328
+ }
329
+ },
330
+ _addColorSelect: function (target) {
331
+ var me = this,
332
+ colorList = $G("J_colorList").getElementsByTagName("td"),
333
+ eraserList = $G("J_eraserBar").children,
334
+ brushList = $G("J_brushBar").children;
335
+
336
+ for (var i = 0, cell; cell = colorList[i++];) {
337
+ cell.children[0].style.opacity = 0.3;
338
+ }
339
+ for (var k = 0, ele; ele = brushList[k++];) {
340
+ if (ele.tagName.toLowerCase() == "a") {
341
+ ele.style.opacity = 0.3;
342
+ var size = browser.ie ? ele.innerText : ele.text;
343
+ if (size.toLowerCase() == this.brushWidth) {
344
+ ele.style.opacity = 1;
345
+ }
346
+ }
347
+ }
348
+ for (var j = 0, node; node = eraserList[j++];) {
349
+ if (node.tagName.toLowerCase() == "a") {
350
+ node.style.opacity = 0.3;
351
+ }
352
+ }
353
+
354
+ target.style.opacity = 1;
355
+ target.blur();
356
+ },
357
+ _addBESelect: function (target) {
358
+ var brushList = $G("J_brushBar").children;
359
+ var eraserList = $G("J_eraserBar").children;
360
+
361
+ for (var i = 0, ele; ele = brushList[i++];) {
362
+ if (ele.tagName.toLowerCase() == "a") {
363
+ ele.style.opacity = 0.3;
364
+ }
365
+ }
366
+ for (var j = 0, node; node = eraserList[j++];) {
367
+ if (node.tagName.toLowerCase() == "a") {
368
+ node.style.opacity = 0.3;
369
+ }
370
+ }
371
+
372
+ target.style.opacity = 1;
373
+ target.blur();
374
+ },
375
+ getCanvasData: function () {
376
+ var picContainer = $G("J_picBoard"),
377
+ img = picContainer.children[0];
378
+ if (img) {
379
+ var x, y;
380
+ if (img.style.position == "absolute") {
381
+ x = parseInt(img.style.left);
382
+ y = parseInt(img.style.top);
383
+ } else {
384
+ x = (picContainer.offsetWidth - img.width) / 2;
385
+ y = (picContainer.offsetHeight - img.height) / 2;
386
+ }
387
+ context.globalCompositeOperation = "destination-over";
388
+ context.drawImage(img, x, y, img.width, img.height);
389
+ } else {
390
+ context.globalCompositeOperation = "destination-atop";
391
+ context.fillStyle = "#fff";//重置画布背景白色
392
+ context.fillRect(0, 0, canvas.width, canvas.height);
393
+ }
394
+ try {
395
+ return canvas.toDataURL("image/png").substring(22);
396
+ } catch (e) {
397
+ return "";
398
+ }
399
+ },
400
+ btn2Highlight: function (id) {
401
+ var cur = $G(id);
402
+ cur.className.indexOf("H") == -1 && (cur.className += "H");
403
+ },
404
+ btn2disable: function (id) {
405
+ var cur = $G(id);
406
+ cur.className.indexOf("H") != -1 && (cur.className = cur.className.replace("H", ""));
407
+ },
408
+ getTarget: function (evt) {
409
+ return evt.target || evt.srcElement;
410
+ }
411
+ };
412
+ })();
413
+
414
+ var ScaleBoy = function () {
415
+ this.dom = null;
416
+ this.scalingElement = null;
417
+ };
418
+ (function () {
419
+ function _appendStyle() {
420
+ var doc = document,
421
+ head = doc.getElementsByTagName('head')[0],
422
+ style = doc.createElement('style'),
423
+ cssText = '.scale{visibility:hidden;cursor:move;position:absolute;left:0;top:0;width:100px;height:50px;background-color:#fff;font-size:0;line-height:0;opacity:.4;filter:Alpha(opacity=40);}'
424
+ + '.scale span{position:absolute;left:0;top:0;width:6px;height:6px;background-color:#006DAE;}'
425
+ + '.scale .hand0, .scale .hand7{cursor:nw-resize;}'
426
+ + '.scale .hand1, .scale .hand6{left:50%;margin-left:-3px;cursor:n-resize;}'
427
+ + '.scale .hand2, .scale .hand4, .scale .hand7{left:100%;margin-left:-6px;}'
428
+ + '.scale .hand3, .scale .hand4{top:50%;margin-top:-3px;cursor:w-resize;}'
429
+ + '.scale .hand5, .scale .hand6, .scale .hand7{margin-top:-6px;top:100%;}'
430
+ + '.scale .hand2, .scale .hand5{cursor:ne-resize;}';
431
+ style.type = 'text/css';
432
+
433
+ try {
434
+ style.appendChild(doc.createTextNode(cssText));
435
+ } catch (e) {
436
+ style.styleSheet.cssText = cssText;
437
+ }
438
+ head.appendChild(style);
439
+ }
440
+
441
+ function _getDom() {
442
+ var doc = document,
443
+ hand,
444
+ arr = [],
445
+ scale = doc.createElement('div');
446
+
447
+ scale.id = 'J_scaleCon';
448
+ scale.className = 'scale';
449
+ for (var i = 0; i < 8; i++) {
450
+ arr.push("<span class='hand" + i + "'></span>");
451
+ }
452
+ scale.innerHTML = arr.join("");
453
+ return scale;
454
+ }
455
+
456
+ var rect = [
457
+ //[left, top, width, height]
458
+ [1, 1, -1, -1],
459
+ [0, 1, 0, -1],
460
+ [0, 1, 1, -1],
461
+ [1, 0, -1, 0],
462
+ [0, 0, 1, 0],
463
+ [1, 0, -1, 1],
464
+ [0, 0, 0, 1],
465
+ [0, 0, 1, 1]
466
+ ];
467
+ ScaleBoy.prototype = {
468
+ init: function () {
469
+ _appendStyle();
470
+ var me = this,
471
+ scale = me.dom = _getDom();
472
+
473
+ me.scaleMousemove.fp = me;
474
+ domUtils.on(scale, 'mousedown', function (e) {
475
+ var target = e.target || e.srcElement;
476
+ me.start = {x: e.clientX, y: e.clientY};
477
+ if (target.className.indexOf('hand') != -1) {
478
+ me.dir = target.className.replace('hand', '');
479
+ }
480
+ domUtils.on(document.body, 'mousemove', me.scaleMousemove);
481
+ e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
482
+ });
483
+ domUtils.on(document.body, 'mouseup', function (e) {
484
+ if (me.start) {
485
+ domUtils.un(document.body, 'mousemove', me.scaleMousemove);
486
+ if (me.moved) {
487
+ me.updateScaledElement({
488
+ position: {x: scale.style.left, y: scale.style.top},
489
+ size: {w: scale.style.width, h: scale.style.height}
490
+ });
491
+ }
492
+ delete me.start;
493
+ delete me.moved;
494
+ delete me.dir;
495
+ }
496
+ });
497
+ return scale;
498
+ },
499
+ startScale: function (objElement) {
500
+ var me = this, Idom = me.dom;
501
+
502
+ Idom.style.cssText = 'visibility:visible;top:' + objElement.style.top + ';left:' + objElement.style.left + ';width:' + objElement.offsetWidth + 'px;height:' + objElement.offsetHeight + 'px;';
503
+ me.scalingElement = objElement;
504
+ },
505
+ updateScaledElement: function (objStyle) {
506
+ var cur = this.scalingElement,
507
+ pos = objStyle.position,
508
+ size = objStyle.size;
509
+ if (pos) {
510
+ typeof pos.x != 'undefined' && (cur.style.left = pos.x);
511
+ typeof pos.y != 'undefined' && (cur.style.top = pos.y);
512
+ }
513
+ if (size) {
514
+ size.w && (cur.style.width = size.w);
515
+ size.h && (cur.style.height = size.h);
516
+ }
517
+ },
518
+ updateStyleByDir: function (dir, offset) {
519
+ var me = this,
520
+ dom = me.dom, tmp;
521
+
522
+ rect['def'] = [1, 1, 0, 0];
523
+ if (rect[dir][0] != 0) {
524
+ tmp = parseInt(dom.style.left) + offset.x;
525
+ dom.style.left = me._validScaledProp('left', tmp) + 'px';
526
+ }
527
+ if (rect[dir][1] != 0) {
528
+ tmp = parseInt(dom.style.top) + offset.y;
529
+ dom.style.top = me._validScaledProp('top', tmp) + 'px';
530
+ }
531
+ if (rect[dir][2] != 0) {
532
+ tmp = dom.clientWidth + rect[dir][2] * offset.x;
533
+ dom.style.width = me._validScaledProp('width', tmp) + 'px';
534
+ }
535
+ if (rect[dir][3] != 0) {
536
+ tmp = dom.clientHeight + rect[dir][3] * offset.y;
537
+ dom.style.height = me._validScaledProp('height', tmp) + 'px';
538
+ }
539
+ if (dir === 'def') {
540
+ me.updateScaledElement({position: {x: dom.style.left, y: dom.style.top}});
541
+ }
542
+ },
543
+ scaleMousemove: function (e) {
544
+ var me = arguments.callee.fp,
545
+ start = me.start,
546
+ dir = me.dir || 'def',
547
+ offset = {x: e.clientX - start.x, y: e.clientY - start.y};
548
+
549
+ me.updateStyleByDir(dir, offset);
550
+ arguments.callee.fp.start = {x: e.clientX, y: e.clientY};
551
+ arguments.callee.fp.moved = 1;
552
+ },
553
+ _validScaledProp: function (prop, value) {
554
+ var ele = this.dom,
555
+ wrap = $G("J_picBoard");
556
+
557
+ value = isNaN(value) ? 0 : value;
558
+ switch (prop) {
559
+ case 'left':
560
+ return value < 0 ? 0 : (value + ele.clientWidth) > wrap.clientWidth ? wrap.clientWidth - ele.clientWidth : value;
561
+ case 'top':
562
+ return value < 0 ? 0 : (value + ele.clientHeight) > wrap.clientHeight ? wrap.clientHeight - ele.clientHeight : value;
563
+ case 'width':
564
+ return value <= 0 ? 1 : (value + ele.offsetLeft) > wrap.clientWidth ? wrap.clientWidth - ele.offsetLeft : value;
565
+ case 'height':
566
+ return value <= 0 ? 1 : (value + ele.offsetTop) > wrap.clientHeight ? wrap.clientHeight - ele.offsetTop : value;
567
+ }
568
+ }
569
+ };
570
+ })();
571
+
572
+ //后台回调
573
+ function ue_callback(url, state) {
574
+ var doc = document,
575
+ picBorard = $G("J_picBoard"),
576
+ img = doc.createElement("img");
577
+
578
+ //图片缩放
579
+ function scale(img, max, oWidth, oHeight) {
580
+ var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
581
+ if (ow > max || oh > max) {
582
+ if (ow >= oh) {
583
+ if (width = ow - max) {
584
+ percent = (width / ow).toFixed(2);
585
+ img.height = oh - oh * percent;
586
+ img.width = max;
587
+ }
588
+ } else {
589
+ if (height = oh - max) {
590
+ percent = (height / oh).toFixed(2);
591
+ img.width = ow - ow * percent;
592
+ img.height = max;
593
+ }
594
+ }
595
+ }
596
+ }
597
+
598
+ //移除遮罩层
599
+ removeMaskLayer();
600
+ //状态响应
601
+ if (state == "SUCCESS") {
602
+ picBorard.innerHTML = "";
603
+ img.onload = function () {
604
+ scale(this, 300);
605
+ picBorard.appendChild(img);
606
+
607
+ var obj = new scrawl();
608
+ obj.btn2Highlight("J_removeImg");
609
+ //trace 2457
610
+ obj.btn2Highlight("J_sacleBoard");
611
+ };
612
+ img.src = url;
613
+ } else {
614
+ alert(state);
615
+ }
616
+ }
617
+
618
+ //去掉遮罩层
619
+ function removeMaskLayer() {
620
+ var maskLayer = $G("J_maskLayer");
621
+ maskLayer.className = "maskLayerNull";
622
+ maskLayer.innerHTML = "";
623
+ dialog.buttons[0].setDisabled(false);
624
+ }
625
+
626
+ //添加遮罩层
627
+ function addMaskLayer(html) {
628
+ var maskLayer = $G("J_maskLayer");
629
+ dialog.buttons[0].setDisabled(true);
630
+ maskLayer.className = "maskLayer";
631
+ maskLayer.innerHTML = html;
632
+ }
633
+
634
+ //执行确认按钮方法
635
+ function exec(scrawlObj) {
636
+ if (scrawlObj.isScrawl) {
637
+ addMaskLayer(lang.scrawlUpLoading);
638
+ var base64 = scrawlObj.getCanvasData();
639
+ if (!!base64) {
640
+ var options = {
641
+ timeout: 100000,
642
+ headers: editor.options.serverHeaders || {},
643
+ onsuccess: function (xhr) {
644
+ if (!scrawlObj.isCancelScrawl) {
645
+ var responseObj;
646
+ responseObj = eval("(" + xhr.responseText + ")");
647
+ if (responseObj.state === "SUCCESS") {
648
+ var imgObj = {},
649
+ url = editor.options.scrawlUrlPrefix + responseObj.url;
650
+ imgObj.src = url;
651
+ imgObj._src = url;
652
+ imgObj.alt = responseObj.original || '';
653
+ editor.execCommand("insertImage", imgObj);
654
+ dialog.close();
655
+ // 触发上传涂鸦事件
656
+ editor.fireEvent("uploadsuccess", {
657
+ res: responseObj,
658
+ type: 'scrawl'
659
+ });
660
+ } else {
661
+ alert(responseObj.state);
662
+ }
663
+
664
+ }
665
+ },
666
+ onerror: function () {
667
+ alert(lang.imageError);
668
+ dialog.close();
669
+ }
670
+ };
671
+ options[editor.getOpt('scrawlFieldName')] = base64;
672
+
673
+ var actionUrl = editor.getActionUrl(editor.getOpt('scrawlActionName')),
674
+ params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
675
+ url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?' : '&') + params);
676
+ ajax.request(url, options);
677
+ }
678
+ } else {
679
+ addMaskLayer(lang.noScarwl + "&nbsp;&nbsp;&nbsp;<input type='button' value='" + lang.continueBtn + "' onclick='removeMaskLayer()'/>");
680
+ }
681
+ }
682
+