ueditor_rails 0.0.2 → 0.0.4

data/README.markdown

@@ -30,8 +30,8 @@ The option can be any which in ```ueditor_config.js.erb```.
 I don't want implement it, cause it's design depends your business, so you should do it by yourself. 
 you can modify ```app/assets/javascripts/ueditor_config.js.erb``` like ```imageUrl: "<%= Rails.application.routes.url_helpers.ueditor_image_path %>"``` to make it available.
 
-## Todo
-- cross domain upload support
+## Cross domain support
+Add ```UeditorRails.enable_cross_domain = true``` in a initializer or 'application.rb'.
 
 ## More about UEditor
 [UEditor doc](http://ueditor.baidu.com/website/document.html)

data/app/assets/javascripts/ueditor_rails/_config.js.erb

@@ -3,58 +3,63 @@ window.UEDITOR_HOME_URL = "<%= asset_path('ueditor/') %>";
 window.UEDITOR_CONFIG = {
 
   //为编辑器实例添加一个路径，这个不能被注释
-  UEDITOR_HOME_URL : window.UEDITOR_HOME_URL
+  UEDITOR_HOME_URL: window.UEDITOR_HOME_URL
   //图片上传配置区
-  ,imageUrl: ""            //图片上传提交地址
-  ,imagePath: ""                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
+  , imageUrl: ""            //图片上传提交地址
+  , imagePath: ""                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
   //,imageFieldName:"upfile"                   //图片数据的key,若此处修改，需要在后台对应文件修改对应参数
   //,compressSide:0                            //等比压缩的基准，确定maxImageSideLength参数的参照对象。0为按照最长边，1为按照宽度，2为按照高度
   //,maxImageSideLength:900                    //上传图片最大允许的边长，超过会自动等比缩放,不缩放就设置一个比较大的值，更多设置在image.html中
 
   //涂鸦图片配置区
-  ,scrawlUrl: ""           //涂鸦上传地址
-  ,scrawlPath: ""                            //图片修正地址，同imagePath
+  , scrawlUrl: ""           //涂鸦上传地址
+  , scrawlPath: ""                            //图片修正地址，同imagePath
 
   //附件上传配置区
-  ,fileUrl: ""               //附件上传提交地址
-  ,filePath: ""                   //附件修正地址，同imagePath
+  , fileUrl: ""               //附件上传提交地址
+  , filePath: ""                   //附件修正地址，同imagePath
   //,fileFieldName:"upfile"                    //附件提交的表单名，若此处修改，需要在后台对应文件修改对应参数
   //远程抓取配置区
   //,catchRemoteImageEnable:true               //是否开启远程图片抓取,默认开启
-  ,catcherUrl: ""   //处理远程图片抓取的地址
-  ,catcherPath: ""                  //图片修正地址，同imagePath
+  , catcherUrl: ""   //处理远程图片抓取的地址
+  , catcherPath: ""                  //图片修正地址，同imagePath
   //,catchFieldName:"upfile"                   //提交到后台远程图片uri合集，若此处修改，需要在后台对应文件修改对应参数
   //,separater:'ue_separate_ue'               //提交至后台的远程图片地址字符串分隔符
   //,localDomain:[]                            //本地顶级域名，当开启远程图片抓取时，除此之外的所有其它域名下的图片都将被抓取到本地,默认不抓取127.0.0.1和localhost
 
   //图片在线管理配置区
-  ,imageManagerUrl: ""       //图片在线管理的处理地址
-  ,imageManagerPath: ""                                    //图片修正地址，同imagePath
+  , imageManagerUrl: ""       //图片在线管理的处理地址
+  , imageManagerPath: ""                                    //图片修正地址，同imagePath
 
   //屏幕截图配置区
-  ,snapscreenHost: ""                                  //屏幕截图的server端文件所在的网站地址或者ip，请不要加http://
-  ,snapscreenServerUrl: "" //屏幕截图的server端保存程序，UEditor的范例代码为“URL +"server/upload/php/snapImgUp.php"”
-  ,snapscreenPath: ""
+  , snapscreenHost: ""                                  //屏幕截图的server端文件所在的网站地址或者ip，请不要加http://
+  , snapscreenServerUrl: "" //屏幕截图的server端保存程序，UEditor的范例代码为“URL +"server/upload/php/snapImgUp.php"”
+  , snapscreenPath: ""
   //,snapscreenServerPort: 80                                    //屏幕截图的server端端口
   //,snapscreenImgAlign: 'center'                                //截图的图片默认的排版方式
 
   //word转存配置区
-  ,wordImageUrl: ""             //word转存提交地址
-  ,wordImagePath: ""                       //
+  , wordImageUrl: ""             //word转存提交地址
+  , wordImagePath: ""                       //
   //,wordImageFieldName:"upfile"                     //word转存表单名若此处修改，需要在后台对应文件修改对应参数
 
   //获取视频数据的地址
-  ,getMovieUrl: ""                   //视频数据获取地址
+  , getMovieUrl: ""                   //视频数据获取地址
 
   //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义
-  ,toolbars:[["bold","italic","underline","strikethrough","forecolor","backcolor","justifyleft","justifycenter","justifyright","justifyjustify","indent","removeformat","formatmatch","autotypeset","pasteplain","customstyle","insertunorderedlist","insertorderedlist","source","fullscreen","preview","help"],["insertimage","emotion","insertvideo","attachment","blockquote","spechars","link","unlink"],["inserttable","deletetable","mergedown","mergeright","splittorows","splittocols","splittocells","mergecells"],[]]
+  , toolbars: [
+    ["bold", "italic", "underline", "strikethrough", "forecolor", "backcolor", "justifyleft", "justifycenter", "justifyright", "justifyjustify", "indent", "removeformat", "formatmatch", "autotypeset", "pasteplain", "customstyle", "insertunorderedlist", "insertorderedlist", "source", "fullscreen", "preview", "help"],
+    ["insertimage", "emotion", "insertvideo", "attachment", "blockquote", "spechars", "link", "unlink"],
+    ["inserttable", "deletetable", "mergedown", "mergeright", "splittorows", "splittocols", "splittocells", "mergecells"],
+    []
+  ]
   //当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置，否则以配置值为准
-  ,labelMap:{
-    'anchor':'', 'undo':''
+  , labelMap: {
+    'anchor': '', 'undo': ''
   }
   //webAppKey
   //百度应用的APIkey，每个站长必须首先去百度官网注册一个key后方能正常使用app功能
-  ,webAppKey:""
+  , webAppKey: ""
 
 
   //语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换，当然，前提条件是lang文件夹下存在对应的语言文件：
@@ -65,8 +70,7 @@ window.UEDITOR_CONFIG = {
 
   //主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换，当然，前提条件是themes文件夹下存在对应的主题文件：
   //现有如下皮肤:default,modern,gorgeous
-  ,theme:'default'
-  ,themePath: "<%= asset_path 'ueditor/themes/' %>"
+  , theme: 'default', themePath: "<%= asset_path 'ueditor/themes/' %>"
 
   //若实例化编辑器的页面手动修改的domain，此处需要设置为true
   //,customDomain:false
@@ -77,7 +81,7 @@ window.UEDITOR_CONFIG = {
   //常用配置项目
   //,isShow : true    //默认显示编辑器
 
-  ,initialContent:''    //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
+  , initialContent: ''    //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
 
   //,initialFrameWidth:1000  //初始化编辑器宽度,默认1000
   //,initialFrameHeight:320  //初始化编辑器高度,默认320

data/app/assets/javascripts/ueditor_rails/dialogs/scrawl.js

@@ -0,0 +1,655 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: xuheng
+ * Date: 12-5-22
+ * Time: 上午11:38
+ * To change this template use File | Settings | File Templates.
+ */
+var scrawl = function (options) {
+    options && this.initOptions(options);
+};
+(function () {
+    var canvas = $G("J_brushBoard"),
+        context = canvas.getContext('2d'),
+        drawStep = [], //undo redo存储
+        drawStepIndex = 0; //undo redo指针
+
+    scrawl.prototype = {
+        isScrawl:false, //是否涂鸦
+        brushWidth:-1, //画笔粗细
+        brushColor:"", //画笔颜色
+
+        initOptions:function (options) {
+            var me = this;
+            me.originalState(options);//初始页面状态
+            me._buildToolbarColor(options.colorList);//动态生成颜色选择集合
+
+            me._addBoardListener(options.saveNum);//添加画板处理
+            me._addOPerateListener(options.saveNum);//添加undo redo clearBoard处理
+            me._addColorBarListener();//添加颜色选择处理
+            me._addBrushBarListener();//添加画笔大小处理
+            me._addEraserBarListener();//添加橡皮大小处理
+            me._addAddImgListener();//添加增添背景图片处理
+            me._addRemoveImgListenter();//删除背景图片处理
+            me._addScalePicListenter();//添加缩放处理
+            me._addClearSelectionListenter();//添加清楚选中状态处理
+
+            me._originalColorSelect(options.drawBrushColor);//初始化颜色选中
+            me._originalBrushSelect(options.drawBrushSize);//初始化画笔选中
+            me._clearSelection();//清楚选中状态
+        },
+
+        originalState:function (options) {
+            var me = this,
+                url = editor.options.scrawlUrl;
+
+            me.brushWidth = options.drawBrushSize;//同步画笔粗细
+            me.brushColor = options.drawBrushColor;//同步画笔颜色
+
+            $G("fileForm").action = url + (url.indexOf("?") == -1 ? "?" : "&") + "action=tmpImg";//初始form提交地址
+            context.lineWidth = me.brushWidth;//初始画笔大小
+            context.strokeStyle = me.brushColor;//初始画笔颜色
+            context.fillStyle = "transparent";//初始画布背景颜色
+            context.lineCap = "round";//去除锯齿
+            context.fill();
+        },
+        _buildToolbarColor:function (colorList) {
+            var tmp = null, arr = [];
+            arr.push("<table id='J_colorList'>");
+            for (var i = 0, color; color = colorList[i++];) {
+                if ((i - 1) % 5 == 0) {
+                    if (i != 1) {
+                        arr.push("</tr>");
+                    }
+                    arr.push("<tr>");
+                }
+                tmp = '#' + color;
+                arr.push("<td><a title='" + tmp + "' href='javascript:void(0)' style='background-color:" + tmp + "'></a></td>");
+            }
+            arr.push("</tr></table>");
+            $G("J_colorBar").innerHTML = arr.join("");
+        },
+
+        _addBoardListener:function (saveNum) {
+            var me = this,
+                margin = 0,
+                startX = -1,
+                startY = -1,
+                isMouseDown = false,
+                isMouseMove = false,
+                isMouseUp = false,
+                buttonPress = 0, button, flag = '';
+
+            margin = parseInt(domUtils.getComputedStyle($G("J_wrap"), "margin-left"));
+            drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
+            drawStepIndex += 1;
+
+            domUtils.on(canvas, ["mousedown", "mousemove", "mouseup", "mouseout"], function (e) {
+                button = browser.webkit ? e.which : buttonPress;
+                switch (e.type) {
+                    case 'mousedown':
+                        buttonPress = 1;
+                        flag = 1;
+                        isMouseDown = true;
+                        isMouseUp = false;
+                        isMouseMove = false;
+                        me.isScrawl = true;
+                        startX = e.clientX - margin;//10为外边距总和
+                        startY = e.clientY - margin;
+                        context.beginPath();
+                        break;
+                    case 'mousemove' :
+                        if (!flag && button == 0) {
+                            return;
+                        }
+                        if (!flag && button) {
+                            startX = e.clientX - margin;//10为外边距总和
+                            startY = e.clientY - margin;
+                            context.beginPath();
+                            flag = 1;
+                        }
+                        if (isMouseUp || !isMouseDown) {
+                            return;
+                        }
+                        var endX = e.clientX - margin,
+                            endY = e.clientY - margin;
+
+                        context.moveTo(startX, startY);
+                        context.lineTo(endX, endY);
+                        context.stroke();
+                        startX = endX;
+                        startY = endY;
+                        isMouseMove = true;
+                        break;
+                    case 'mouseup':
+                        buttonPress = 0;
+                        if (!isMouseDown)return;
+                        if (!isMouseMove) {
+                            context.arc(startX, startY, context.lineWidth, 0, Math.PI * 2, false);
+                            context.fillStyle = context.strokeStyle;
+                            context.fill();
+                        }
+                        context.closePath();
+                        me._saveOPerate(saveNum);
+                        isMouseDown = false;
+                        isMouseMove = false;
+                        isMouseUp = true;
+                        startX = -1;
+                        startY = -1;
+                        break;
+                    case 'mouseout':
+                        flag = '';
+                        buttonPress = 0;
+                        if (button == 1) return;
+                        context.closePath();
+                        break;
+                }
+            });
+        },
+        _addOPerateListener:function (saveNum) {
+            var me = this;
+            domUtils.on($G("J_previousStep"), "click", function () {
+                if (drawStepIndex > 1) {
+                    drawStepIndex -= 1;
+                    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+                    context.putImageData(drawStep[drawStepIndex - 1], 0, 0);
+                    me.btn2Highlight("J_nextStep");
+                    drawStepIndex == 1 && me.btn2disable("J_previousStep");
+                }
+            });
+            domUtils.on($G("J_nextStep"), "click", function () {
+                if (drawStepIndex > 0 && drawStepIndex < drawStep.length) {
+                    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+                    context.putImageData(drawStep[drawStepIndex], 0, 0);
+                    drawStepIndex += 1;
+                    me.btn2Highlight("J_previousStep");
+                    drawStepIndex == drawStep.length && me.btn2disable("J_nextStep");
+                }
+            });
+            domUtils.on($G("J_clearBoard"), "click", function () {
+                context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+                drawStep = [];
+                me._saveOPerate(saveNum);
+                drawStepIndex = 1;
+                me.isScrawl = false;
+                me.btn2disable("J_previousStep");
+                me.btn2disable("J_nextStep");
+                me.btn2disable("J_clearBoard");
+            });
+        },
+        _addColorBarListener:function () {
+            var me = this;
+            domUtils.on($G("J_colorBar"), "click", function (e) {
+                var target = me.getTarget(e),
+                    color = target.title;
+                if (!!color) {
+                    me._addColorSelect(target);
+
+                    me.brushColor = color;
+                    context.globalCompositeOperation = "source-over";
+                    context.lineWidth = me.brushWidth;
+                    context.strokeStyle = color;
+                }
+            });
+        },
+        _addBrushBarListener:function () {
+            var me = this;
+            domUtils.on($G("J_brushBar"), "click", function (e) {
+                var target = me.getTarget(e),
+                    size = browser.ie ? target.innerText : target.text;
+                if (!!size) {
+                    me._addBESelect(target);
+
+                    context.globalCompositeOperation = "source-over";
+                    context.lineWidth = parseInt(size);
+                    context.strokeStyle = me.brushColor;
+                    me.brushWidth = context.lineWidth;
+                }
+            });
+        },
+        _addEraserBarListener:function () {
+            var me = this;
+            domUtils.on($G("J_eraserBar"), "click", function (e) {
+                var target = me.getTarget(e),
+                    size = browser.ie ? target.innerText : target.text;
+                if (!!size) {
+                    me._addBESelect(target);
+
+                    context.lineWidth = parseInt(size);
+                    context.globalCompositeOperation = "destination-out";
+                    context.strokeStyle = "#FFF";
+                }
+            });
+        },
+        _addAddImgListener:function () {
+            var doc = document,
+                file = $G("J_imgTxt");
+            domUtils.on(file, "change", function () {
+                var frm = file.parentNode;
+                addMaskLayer(lang.backgroundUploading);
+                frm.submit();
+                frm.reset();
+            });
+        },
+        _addRemoveImgListenter:function () {
+            var me = this;
+            domUtils.on($G("J_removeImg"), "click", function () {
+                $G("J_picBoard").innerHTML = "";
+                me.btn2disable("J_removeImg");
+                me.btn2disable("J_sacleBoard");
+            });
+        },
+        _addScalePicListenter:function () {
+            domUtils.on($G("J_sacleBoard"), "click", function () {
+                var picBoard = $G("J_picBoard"),
+                    scaleCon = $G("J_scaleCon"),
+                    img = picBoard.children[0];
+
+                if (img) {
+                    if (!scaleCon) {
+                        picBoard.style.cssText = "position:relative;z-index:999;"+picBoard.style.cssText;
+                        img.style.cssText = "position: absolute;top:" + (canvas.height - img.height) / 2 + "px;left:" + (canvas.width - img.width) / 2 + "px;";
+                        var scale = new ScaleBoy();
+                        picBoard.appendChild(scale.init());
+                        scale.startScale(img);
+                    } else {
+                        if (scaleCon.style.visibility == "visible") {
+                            scaleCon.style.visibility = "hidden";
+                            picBoard.style.position = "";
+                            picBoard.style.zIndex = "";
+                        } else {
+                            scaleCon.style.visibility = "visible";
+                            picBoard.style.cssText += "position:relative;z-index:999";
+                        }
+                    }
+                }
+            });
+        },
+        _addClearSelectionListenter:function () {
+            var doc = document;
+            domUtils.on(doc, 'mousemove', function (e) {
+                if (browser.ie)
+                    doc.selection.clear();
+                else
+                    window.getSelection().removeAllRanges();
+            });
+        },
+        _clearSelection:function () {
+            var list = ["J_operateBar", "J_colorBar", "J_brushBar", "J_eraserBar", "J_picBoard"];
+            for (var i = 0, group; group = list[i++];) {
+                domUtils.unSelectable($G(group));
+            }
+        },
+
+        _saveOPerate:function (saveNum) {
+            var me = this;
+            if (drawStep.length <= saveNum) {
+                if(drawStepIndex<drawStep.length){
+                    me.btn2disable("J_nextStep");
+                    drawStep.splice(drawStepIndex);
+                }
+                drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
+                drawStepIndex = drawStep.length;
+            } else {
+                drawStep.shift();
+                drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
+                drawStepIndex = drawStep.length;
+            }
+            me.btn2Highlight("J_previousStep");
+            me.btn2Highlight("J_clearBoard");
+        },
+
+        _originalColorSelect:function (title) {
+            var colorList = $G("J_colorList").getElementsByTagName("td");
+            for (var j = 0, cell; cell = colorList[j++];) {
+                if (cell.children[0].title.toLowerCase() == title) {
+                    cell.children[0].style.opacity = 1;
+                }
+            }
+        },
+        _originalBrushSelect:function (text) {
+            var brushList = $G("J_brushBar").children;
+            for (var i = 0, ele; ele = brushList[i++];) {
+                if (ele.tagName.toLowerCase() == "a") {
+                    var size = browser.ie ? ele.innerText : ele.text;
+                    if (size.toLowerCase() == text) {
+                        ele.style.opacity = 1;
+                    }
+                }
+            }
+        },
+        _addColorSelect:function (target) {
+            var me = this,
+                colorList = $G("J_colorList").getElementsByTagName("td"),
+                eraserList = $G("J_eraserBar").children,
+                brushList = $G("J_brushBar").children;
+
+            for (var i = 0, cell; cell = colorList[i++];) {
+                cell.children[0].style.opacity = 0.3;
+            }
+            for (var k = 0, ele; ele = brushList[k++];) {
+                if (ele.tagName.toLowerCase() == "a") {
+                    ele.style.opacity = 0.3;
+                    var size = browser.ie ? ele.innerText : ele.text;
+                    if (size.toLowerCase() == this.brushWidth) {
+                        ele.style.opacity = 1;
+                    }
+                }
+            }
+            for (var j = 0, node; node = eraserList[j++];) {
+                if (node.tagName.toLowerCase() == "a") {
+                    node.style.opacity = 0.3;
+                }
+            }
+
+            target.style.opacity = 1;
+            target.blur();
+        },
+        _addBESelect:function (target) {
+            var brushList = $G("J_brushBar").children;
+            var eraserList = $G("J_eraserBar").children;
+
+            for (var i = 0, ele; ele = brushList[i++];) {
+                if (ele.tagName.toLowerCase() == "a") {
+                    ele.style.opacity = 0.3;
+                }
+            }
+            for (var j = 0, node; node = eraserList[j++];) {
+                if (node.tagName.toLowerCase() == "a") {
+                    node.style.opacity = 0.3;
+                }
+            }
+
+            target.style.opacity = 1;
+            target.blur();
+        },
+        getCanvasData:function () {
+            var picContainer = $G("J_picBoard"),
+                img = picContainer.children[0];
+            if (img) {
+                var x, y;
+                if (img.style.position == "absolute") {
+                    x = parseInt(img.style.left);
+                    y = parseInt(img.style.top);
+                } else {
+                    x = (picContainer.offsetWidth - img.width) / 2;
+                    y = (picContainer.offsetHeight - img.height) / 2;
+                }
+                context.globalCompositeOperation = "destination-over";
+                context.drawImage(img, x, y, img.width, img.height);
+            } else {
+                context.globalCompositeOperation = "destination-atop";
+                context.fillStyle = "#fff";//重置画布背景白色
+                context.fillRect(0, 0, canvas.width, canvas.height);
+            }
+            try {
+                return canvas.toDataURL("image/png").substring(22);
+            } catch (e) {
+                return "";
+            }
+        },
+        btn2Highlight:function (id) {
+            var cur = $G(id);
+            cur.className.indexOf("H") == -1 && (cur.className += "H");
+        },
+        btn2disable:function (id) {
+            var cur = $G(id);
+            cur.className.indexOf("H") != -1 && (cur.className = cur.className.replace("H", ""));
+        },
+        getTarget:function (evt) {
+            return evt.target || evt.srcElement;
+        }
+    };
+})();
+
+var ScaleBoy = function () {
+    this.dom = null;
+    this.scalingElement = null;
+};
+(function () {
+    function _appendStyle() {
+        var doc = document,
+            head = doc.getElementsByTagName('head')[0],
+            style = doc.createElement('style'),
+            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);}'
+                + '.scale span{position:absolute;left:0;top:0;width:6px;height:6px;background-color:#006DAE;}'
+                + '.scale .hand0, .scale .hand7{cursor:nw-resize;}'
+                + '.scale .hand1, .scale .hand6{left:50%;margin-left:-3px;cursor:n-resize;}'
+                + '.scale .hand2, .scale .hand4, .scale .hand7{left:100%;margin-left:-6px;}'
+                + '.scale .hand3, .scale .hand4{top:50%;margin-top:-3px;cursor:w-resize;}'
+                + '.scale .hand5, .scale .hand6, .scale .hand7{margin-top:-6px;top:100%;}'
+                + '.scale .hand2, .scale .hand5{cursor:ne-resize;}';
+        style.type = 'text/css';
+
+        try {
+            style.appendChild(doc.createTextNode(cssText));
+        } catch (e) {
+            style.styleSheet.cssText = cssText;
+        }
+        head.appendChild(style);
+    }
+
+    function _getDom() {
+        var doc = document,
+            hand,
+            arr = [],
+            scale = doc.createElement('div');
+
+        scale.id = 'J_scaleCon';
+        scale.className = 'scale';
+        for (var i = 0; i < 8; i++) {
+            arr.push("<span class='hand" + i + "'></span>");
+        }
+        scale.innerHTML = arr.join("");
+        return scale;
+    }
+
+    var rect = [
+        //[left, top, width, height]
+        [1, 1, -1, -1],
+        [0, 1, 0, -1],
+        [0, 1, 1, -1],
+        [1, 0, -1, 0],
+        [0, 0, 1, 0],
+        [1, 0, -1, 1],
+        [0, 0, 0, 1],
+        [0, 0, 1, 1]
+    ];
+    ScaleBoy.prototype = {
+        init:function () {
+            _appendStyle();
+            var me = this,
+                scale = me.dom = _getDom();
+
+            me.scaleMousemove.fp = me;
+            domUtils.on(scale, 'mousedown', function (e) {
+                var target = e.target || e.srcElement;
+                me.start = {x:e.clientX, y:e.clientY};
+                if (target.className.indexOf('hand') != -1) {
+                    me.dir = target.className.replace('hand', '');
+                }
+                domUtils.on(document.body, 'mousemove', me.scaleMousemove);
+                e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
+            });
+            domUtils.on(document.body, 'mouseup', function (e) {
+                if (me.start) {
+                    domUtils.un(document.body, 'mousemove', me.scaleMousemove);
+                    if (me.moved) {
+                        me.updateScaledElement({position:{x:scale.style.left, y:scale.style.top}, size:{w:scale.style.width, h:scale.style.height}});
+                    }
+                    delete me.start;
+                    delete me.moved;
+                    delete me.dir;
+                }
+            });
+            return scale;
+        },
+        startScale:function (objElement) {
+            var me = this, Idom = me.dom;
+
+            Idom.style.cssText = 'visibility:visible;top:' + objElement.style.top + ';left:' + objElement.style.left + ';width:' + objElement.offsetWidth + 'px;height:' + objElement.offsetHeight + 'px;';
+            me.scalingElement = objElement;
+        },
+        updateScaledElement:function (objStyle) {
+            var cur = this.scalingElement,
+                pos = objStyle.position,
+                size = objStyle.size;
+            if (pos) {
+                typeof pos.x != 'undefined' && (cur.style.left = pos.x);
+                typeof pos.y != 'undefined' && (cur.style.top = pos.y);
+            }
+            if (size) {
+                size.w && (cur.style.width = size.w);
+                size.h && (cur.style.height = size.h);
+            }
+        },
+        updateStyleByDir:function (dir, offset) {
+            var me = this,
+                dom = me.dom, tmp;
+
+            rect['def'] = [1, 1, 0, 0];
+            if (rect[dir][0] != 0) {
+                tmp = parseInt(dom.style.left) + offset.x;
+                dom.style.left = me._validScaledProp('left', tmp) + 'px';
+            }
+            if (rect[dir][1] != 0) {
+                tmp = parseInt(dom.style.top) + offset.y;
+                dom.style.top = me._validScaledProp('top', tmp) + 'px';
+            }
+            if (rect[dir][2] != 0) {
+                tmp = dom.clientWidth + rect[dir][2] * offset.x;
+                dom.style.width = me._validScaledProp('width', tmp) + 'px';
+            }
+            if (rect[dir][3] != 0) {
+                tmp = dom.clientHeight + rect[dir][3] * offset.y;
+                dom.style.height = me._validScaledProp('height', tmp) + 'px';
+            }
+            if (dir === 'def') {
+                me.updateScaledElement({position:{x:dom.style.left, y:dom.style.top}});
+            }
+        },
+        scaleMousemove:function (e) {
+            var me = arguments.callee.fp,
+                start = me.start,
+                dir = me.dir || 'def',
+                offset = {x:e.clientX - start.x, y:e.clientY - start.y};
+
+            me.updateStyleByDir(dir, offset);
+            arguments.callee.fp.start = {x:e.clientX, y:e.clientY};
+            arguments.callee.fp.moved = 1;
+        },
+        _validScaledProp:function (prop, value) {
+            var ele = this.dom,
+                wrap = $G("J_picBoard");
+
+            value = isNaN(value) ? 0 : value;
+            switch (prop) {
+                case 'left':
+                    return value < 0 ? 0 : (value + ele.clientWidth) > wrap.clientWidth ? wrap.clientWidth - ele.clientWidth : value;
+                case 'top':
+                    return value < 0 ? 0 : (value + ele.clientHeight) > wrap.clientHeight ? wrap.clientHeight - ele.clientHeight : value;
+                case 'width':
+                    return value <= 0 ? 1 : (value + ele.offsetLeft) > wrap.clientWidth ? wrap.clientWidth - ele.offsetLeft : value;
+                case 'height':
+                    return value <= 0 ? 1 : (value + ele.offsetTop) > wrap.clientHeight ? wrap.clientHeight - ele.offsetTop : value;
+            }
+        }
+    };
+})();
+
+//后台回调
+function ue_callback(url, state) {
+    var doc = document,
+        picBorard = $G("J_picBoard"),
+        img = doc.createElement("img");
+
+    //图片缩放
+    function scale(img, max, oWidth, oHeight) {
+        var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
+        if (ow > max || oh > max) {
+            if (ow >= oh) {
+                if (width = ow - max) {
+                    percent = (width / ow).toFixed(2);
+                    img.height = oh - oh * percent;
+                    img.width = max;
+                }
+            } else {
+                if (height = oh - max) {
+                    percent = (height / oh).toFixed(2);
+                    img.width = ow - ow * percent;
+                    img.height = max;
+                }
+            }
+        }
+    }
+
+    //移除遮罩层
+    removeMaskLayer();
+    //状态响应
+    if (state == "SUCCESS") {
+        picBorard.innerHTML = "";
+        img.onload = function () {
+            scale(this, 300);
+            picBorard.appendChild(img);
+
+            var obj = new scrawl();
+            obj.btn2Highlight("J_removeImg");
+            //trace 2457
+            obj.btn2Highlight("J_sacleBoard");
+        };
+        img.src = editor.options.scrawlPath + url;
+    } else {
+        alert(state);
+    }
+}
+//去掉遮罩层
+function removeMaskLayer() {
+    var maskLayer = $G("J_maskLayer");
+    maskLayer.className = "maskLayerNull";
+    maskLayer.innerHTML = "";
+    dialog.buttons[0].setDisabled(false);
+}
+//添加遮罩层
+function addMaskLayer(html) {
+    var maskLayer = $G("J_maskLayer");
+    dialog.buttons[0].setDisabled(true);
+    maskLayer.className = "maskLayer";
+    maskLayer.innerHTML = html;
+}
+//执行确认按钮方法
+function exec(scrawlObj) {
+    if (scrawlObj.isScrawl) {
+        addMaskLayer(lang.scrawlUpLoading);
+        var base64 = scrawlObj.getCanvasData();
+        if (!!base64) {
+            ajax.request(editor.options.scrawlUrl, {
+                timeout:100000,
+                content:base64,
+                onsuccess:function (xhr) {
+                    if (!scrawlObj.isCancelScrawl) {
+                        var responseObj;
+                        responseObj = eval("(" + xhr.responseText + ")");
+                        if (responseObj.state == "SUCCESS") {
+                            var imgObj = {},
+                                url = editor.options.scrawlPath + responseObj.url;
+                            imgObj.src = url;
+                            imgObj.data_ue_src = url;
+                            editor.execCommand("insertImage", imgObj);
+                            dialog.close();
+                        } else {
+                            alert(responseObj.state);
+                        }
+
+                    }
+                },
+                onerror:function () {
+                    alert(lang.imageError);
+                    dialog.close();
+                }
+            });
+        }
+    } else {
+        addMaskLayer(lang.noScarwl + "&nbsp;&nbsp;&nbsp;<input type='button' value='" + lang.continueBtn + "'  onclick='removeMaskLayer()'/>");
+    }
+}
+