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

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

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值