修复UEditor拖放大小的bug

来源：互联网发布：道客巴巴软件编辑：程序博客网时间：2024/05/02 04:28

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

到这一步就处理完成了，拖放立马可以看到效果

1 0