1. 程式人生 > >修復UEditor拖放大小的bug

修復UEditor拖放大小的bug

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());
            });
        });

到這一步就處理完成了,拖放立馬可以看到效果