修復UEditor拖放大小的bug
阿新 • • 發佈:2018-12-23
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());
});
});
到這一步就處理完成了,拖放立馬可以看到效果