UEditor 版本为1.4.3.3 ,首先是开启UEditor拖放大小的功能
在 ueditor.config.js 中修改scaleEnabled为true
//是否可以拉伸长高,默认true(当开启时,自动长高失效)
,scaleEnabled:true
接着问题来了,在拖放UEditor大小的时候,编辑区域的大小居然没有跟着改变!如图
这个问题我给百度UEditor官方发过邮件,结果没任何回应,尝试加官方群,结果人也满了,加不进去。
如此,只有自己解决了
首先找到UEditor的最外层DIV叫edui1,里面编辑区域的DIV叫edui1_iframeholder,我的思路就是给
edui1注册一个resize事件,当edui1宽度改变时,把edui1的宽度复制给edui1_iframeholder的宽度,使他们相等。
还有一个问题,Jquery里面没有给div注册resize事件的功能,在网上找到一个jquery resize的插件
插件项目地址
//resize of div
(function ($, h, c) {
var a = $([]),
e = $.resize = $.extend($.resize, {}),
i,
k = "setTimeout",
j = "resize",
d = j + "-special-event",
b = "delay",
f = "throttleWindow";
e[b] = 250;
e[f] = true;
$.event.special[j] = {
setup: function () {
if (!e[f] && this[k]) {
return false;
}
var l = $(this);
a = a.add(l);
$.data(this, d, {
w: l.width(),
h: l.height()
});
if (a.length === 1) {
g();
}
},
teardown: function () {
if (!e[f] && this[k]) {
return false;
}
var l = $(this);
a = a.not(l);
l.removeData(d);
if (!a.length) {
clearTimeout(i);
}
},
add: function (l) {
if (!e[f] && this[k]) {
return false;
}
var n;
function m(s, o, p) {
var q = $(this),
r = $.data(this, d);
r.w = o !== c ? o : q.width();
r.h = p !== c ? p : q.height();
n.apply(this, arguments);
}
if ($.isFunction(l)) {
n = l;
return m;
} else {
n = l.handler;
l.handler = m;
}
}
};
function g() {
i = h[k](function () {
a.each(function () {
var n = $(this),
m = n.width(),
l = n.height(),
o = $.data(this, d);
if (m !== o.w || l !== o.h) {
n.trigger(j, [o.w = m, o.h = l]);
}
});
g();
},
e[b]);
}
})(jQuery, this);
接着就可以处理Div的resize事件了
//注意,一定要在UEditor的ready事件里写,保证UEditor的DOM元素全部加载完成才能处理
editor.ready(function (obj) {
$('#' + editor.container.id).resize(function () {
$('#' + editor.container.id + '_iframeholder').width($(this).width());
});
});
到这一步就处理完成了,拖放立马可以看到效果