百度富文本编辑器Ueditor上传图片时标签中添加宽高

最新推荐文章于 2023-12-30 20:01:21 发布

aichengxu___

最新推荐文章于 2023-12-30 20:01:21 发布

阅读量5.7k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/aichengxu___/article/details/77600699

本文介绍如何在UEditor中实现图片的上传功能，并通过JavaScript自定义图片的宽度和高度属性，确保图片能够正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要解决："<p><img src="http://********ueditor/jsp/upload/image/20170826/1503723619975098314.png" title="1503723619975098314.png"/></p>"


变成：

"<p><img src="http://********ueditor/jsp/upload/image/20170826/15724
432738036393.png" title="1503724432738036393.png" width="300px" 
height="300px"/></p>"
g" alt="2017-08-11_133534.png" width="274" height="253"/></p>"

ueditor.all.js中：直接搜索callback()

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

            /*==================自己添加的代码====================*/
            var width='';
            var height='';
            // 创建对象
            var img = new Image();
            // 设置图片的src
            img.src = link;
            //console.log("link:"+link);
            img.onload = function(){
                console.log('width:'+img.width+',height:'+img.height);
                width=img.width;
                height=img.height;
                loader.setAttribute('width',width);
                loader.setAttribute('height',height);
            };
            /*===================结束========================*/

            loader.setAttribute('title', json.title || '');
            loader.setAttribute('alt', json.original || '');
            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);
}