点击图片编辑器默认出现的工具
需求是点击图片不出现默认样式，而是在编辑器外出现图片属性编辑框，需求效果如下
我的做法是在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();
},