[笔记]百度UEditor_解决图片在手机端的自适应问题

注意哈:此分享年头太多了,没环境复现调试,仅供参考,仅供参考!!!

问题: 手机端展示的图片超出屏幕

1e3ee48f1ab9c290e83aef6c096b9459.png 25c55da2183bd847f9a8d2e9f8ad21c3.png

解决方法: 在页面引入 {ueditor_home}/ueditor.all.js 找到以下内容并添加红色部分
function callback(){
    try{
        var link, json, loader,
            body = (iframe.contentDocument || iframe.contentWindow.document).body,
            result = body.innerText || body.textContent || '';
        json = (new Function("return " + result))();
        link = me.options.imageUrlPrefix + json.url;
        if(json.state == 'SUCCESS' && json.url) {
            loader = me.document.getElementById(loadingId);
            loader.setAttribute('src', link);
            loader.setAttribute('_src', link);
            loader.setAttribute('title', json.title || '');
            loader.setAttribute('alt', json.original || '');
            loader.setAttribute('style','max-width:100%');//解决图片自适应问题
            loader.removeAttribute('id');
            domUtils.removeClasses(loader, 'loadingclass');
        } else {
            showErrorLoader && showErrorLoader(json.state);
        }
    }catch(er){
        showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
    }
    form.reset();
    domUtils.un(iframe, 'load', callback);
}

文件部署后效果如下:

编辑器部署前:                                                                   编辑器部署后:

6547992c1510f28df0c45d71ed67d21b.png   a6b7450c3fc6ca6f16f4b7967c2c059f.png

 

6fa5b49b4895d2f4cee0eb3484a67f9e.png    e177e9bf588284fe04d13820fee568ae.png

手机端显示效果:

e8b3898231f44393fe1289906dcf4263.png

 

其他参考链接:

关于百度编辑器中图片手机端自适应、微信jssdk当前页链接、setinterval用法

百度ueditor上传图片时设置默认宽高度

解决使用百度UEditor编辑器后移动端图片被拉伸问题

关于ueditor上传图片后拖动图片自动添加style样式 手机端不能自适应问题

 

评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值