點選圖片編輯器默認出現的工具

需求是點選圖片不出現預設樣式，而是在編輯器外出現圖片屬性編輯框，需求效果如下

我的做法是在css裡面將默認出現的工具隱藏，然後直接在ueditor.all.js裡面修改Scale物件的show方法。原始碼如下：

 show: function (targetObj) {
                var me = this;
                me.resizer.style.display = 'block';
                if(targetObj) me.attachTo(targetObj);

                domUtils.on(this.resizer, 'mousedown', me.proxy(me._eventHandler, me));
                domUtils.on(me.doc, 'mouseup', me.proxy(me._eventHandler, me));

                me.showCover();
                me.editor.fireEvent('afterscaleshow', me);
                me.editor.fireEvent('saveScene');
            },

更改後代碼如下：

 show: function(targetObj) {
                    var me = this;
                    me.resizer.style.display = 'block';
                    if (targetObj) me.attachTo(targetObj);
                    domUtils.on(this.resizer, 'mousedown', me.proxy(me._eventHandler, me));
                    domUtils.on(me.doc, 'mouseup', me.proxy(me._eventHandler, me));
                    me.showCover();
                    me.editor.fireEvent('afterscaleshow', me);
                    me.editor.fireEvent('saveScene');
                    //下面是增加部分
                    if (me.target.localName == "img" || me.target.localName == "IMG") {
                        cmedit.EditSystem.imgClickEvent(targetObj); //圖片屬性
                    }
                },　　

另在js裡寫上圖片點選方法：

        imgClickEvent: function(img) {
            $(".cont_right>div").not(".messagetabs").hide();
            var ue = UE.getEditor("editer_");
            var thisImg = $(img),
                description = thisImg.attr("description"),
                address = thisImg.attr("src"),
                name = thisImg.attr("alt"),
                originalWidth = thisImg.width(),
                originalHeight = thisImg.height();
            var imagePreview = '<img src="' + address + '" alt="' + name + '" style="width: 100%; height: 100%;">';
            $('#imgAddress').val(address);
            $('#imgName').val(name);
            $('#imgDescribe').val("");
            if (description) {
                $('#imgDescribe').val(description);
            }
            thisImg.attr("title", name);
            //判斷圖片來源
            if (typeof(thisImg.attr("cfbresourceid")) != "undefined") {
                $("#image_original").html("本地資源");
            } else if (typeof(thisImg.attr("fileid")) != "undefined") {
                $("#image_original").html("<span style='color:#C93111;' >媒資系統(CRE)</span>");
            }
            $('#image_preview').html(imagePreview);
            $('#back_to_original').off("click").on("click", function() {
                $('#img_width').val(originalWidth);
                $('#img_height').val(originalHeight);
                thisImg.width(originalWidth);
                thisImg.height(originalHeight);
            });
            $('#back_to_original').trigger("click");
            // 設定尺寸
            var ratio = $('#img_width').val() / $('#img_height').val();
            $('#image_size_lock').off("click").on("click", function() {
                $(this).children().toggleClass("icon-suo icon-jiesuo");
                ratio = $('#img_width').val() / $('#img_height').val();
                if ($(this).children().hasClass("icon-suo")) {
                    $('#lock_explain').html("已鎖定比例");
                } else {
                    $('#lock_explain').html("已解鎖比例");
                }
            });
            $('#img_width').off("input").on("input", function() {
                var imgSize = $(this).val();
                thisImg.width(imgSize);
                if ($('#image_size_lock').children().hasClass("icon-suo")) {
                    var newSize = parseInt(imgSize / ratio);
                    $('#img_height').val(newSize);
                    thisImg.height(newSize);
                }
            });
            $('#img_height').off("input").on("input", function() {
                var imgSize = $(this).val();
                thisImg.height(imgSize);
                if ($('#image_size_lock').children().hasClass("icon-suo")) {
                    var newSize = parseInt(imgSize * ratio)
                    $('#img_width').val(newSize);
                    thisImg.width(newSize);
                }
            });
            // 描述
            $('#imgDescribe').off("change").on("change", function() {
                var context = $(this).val();
                thisImg.attr("description", context);
            });
            //設定浮動
            $('#float_none').on("click", function() {
                ue.execCommand('imagefloat', 'none');
            });
            $('#float_left').on("click", function() {
                ue.execCommand('imagefloat', 'left');
            });
            $('#float_right').on("click", function() {
                ue.execCommand('imagefloat', 'right');
            });
            $('#float_middle').on("click", function() {
                ue.execCommand('imagefloat', 'center');
            });
            //設定縮圖
            $('#set_thumbnail_btn').on("click", function() {
                thisContext.uploadLitimg(address);
            });
            //編輯圖片
            $('#edit_image_btn').on("click", function() {
                ue.execCommand("waterimage", address);
            });
            $('#imageProperty').show();
        },