利用正则表达式来解决ueditor上传的图片太大（absolutely available）

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

原创最新推荐文章于 2023-12-30 20:01:21 发布 · 522 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ueditor图片操作 #ueditor图片太大 #ueditor #js正则表达式

解决问题同时被 2 个专栏收录

75 篇文章

订阅专栏

ueditor

2 篇文章

订阅专栏

本文介绍了一种在UEditor中控制图片显示大小的方法，利用JavaScript正则表达式判断图片并调整其尺寸，同时提供了编辑框内直接设置图片大小的CSS解决方案。

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

在用ueditor上传图片的时候，会在显示框（这里指的不是编辑框而是拿到的editValue）显示太大。这里可以利用

网络上也有许多的方法，比如修改ueditor.all.js来，我试过不行，这里推荐一个简单易操作的方法，绝对可行。

这里利用到了JavaScript正则表达式，先利用JavaScript正则表达式来判断是否是一张图片，如果是图片就添加相关的属性来控制图片的大小。

//使用正则表达式来判断是否为图片，如果为图片就将其改成适当大大小
            //防止图片太大
            if(/<img/.test(msg)){
                //msg.replace(/<img/,"<img style='height: 20%;width: 20%;'");
                var patt=new RegExp("<img","g");//can be instead of patt=/man/g;
                msg=msg.replace(patt,"<img style='height: 20%;width: 20%;'");
            }

这里通过替换来实现添加的操作。

这样在显示内容的时候就可以控制图片的大小了，就不会无限制太大了。

另外：附上在编辑框（ueditor）里控制图片大小的方法：

ueditor项目目录下有一个iframe.css文件，里面可以自己写：

写下以下内容：

/*可以在这里添加你自己的css*/
img {
    max-width: 20%; /*图片自适应宽度*/
    max-height: 20%;
}
body {
    overflow-y: scroll !important;
}
.view {
    word-break: break-all;
}
.vote_area {
    display: block;
}
.vote_iframe {
    background-color: transparent;
    border: 0 none;
    height: 100%;
}
#edui1_imagescale{display:none !important;}

而后，记得在实例化编辑器中引入该文件才可以生效：

比如我的：

 var ue = UE.getEditor('editor', {
        toolbars: [
            ['redo', 'snapscreen', 'bold', 'horizontal', 'cleardoc',
                'fontfamily', 'forecolor', 'fontsize', 'simpleupload', 'insertimage'
                , 'emotion', 'map', 'insertvideo', 'attachment']
        ],
        iframeCssUrl: '/ueditor/utf8-jsp/themes/iframe.css',// 引入css
        autoHeightEnabled: false,
        autoFloatEnabled: true,
        initialFrameWidth: 500,
        initialFrameHeight: 100
    });

另外，要注意路径要写正确。