关于Java使用ueditor上传图片的一些总结

1.如何配置ueditor让上传的图片到项目之外?

因为图片上传到web项目中,重新部署项目可能会丢失图片。

解决方法:下载ueditor.1.1.2.jar.

地址:ueditor-1.1.2项目源码及jar包.zip
链接: https://pan.baidu.com/s/1Bhumfw8OX16n0MTO9ur73g 提取码: 5mmw

在config.json中最上面加入上传的物理地址:

"localSavePathPrefix":"/home/back_www",

2.ueditor没有单图片上传按钮,点击图片上传的按钮没有反应,js报错:“请求后台配置项http错误,上传功能将不能正常使用!”。

这是因为前台ueditor.config.js中配置的serverUrl错误了。应该是你访问jsp/controller.jsp那个服务器地址。

      ,serverUrl:"http://xxx.com:/jsp/controller.jsp"

3.在ueditor编辑器中上传的图片没有回显到编辑器中

正确配置config.json中的    "imageUrlPrefix":"http://ck.xxxx.com:9999",

4.上传到服务器中的图片nginx没有权限访问,需要授权777进行访问?

这是因为nginx配置文件中,user配置错误了,之前配置的是user nginx;

更改为user  root;

5.nginx如何配置访问上传到项目之外的图片?

location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|woff2|svg|ttf)$ {
        root   /home/back_www;
        index  index.html index.htm;
    }

当访问到以上面格式的文件名结尾的路径时,比如:http://www.aaa.com/static/app/1.0.0/img/nav/user.png,默认将从/home/back_www/static/app/1.0.0/img/nav/user.png下面寻找。

6.复制粘贴微信公众号中的文章,图片不能显示,也不能保存?

1.ueditor.config.js中打开注释

//设置远程图片是否抓取到本地保存

,catchRemoteImageEnable: true //设置是否抓取远程图片

2.ueditor.all.js添加代码

/**
 * 远程图片抓取,当开启本插件时所有不符合本地域名的图片都将被抓取成为本地服务器上的图片
 */
UE.plugins['catchremoteimage'] = function () {
    var me = this,
        ajax = UE.ajax;

    /* 设置默认值 */
    if (me.options.catchRemoteImageEnable === false) return;
    me.setOpt({
        catchRemoteImageEnable: false
    });

    me.addListener("afterpaste", function () {
        me.fireEvent("catchRemoteImage");
    });

    me.addListener("catchRemoteImage", function () {
        console.log("开始抓取" );

        var catcherLocalDomain = me.getOpt('catcherLocalDomain'),
            catcherActionUrl = me.getActionUrl(me.getOpt('catcherActionName')),
            catcherUrlPrefix = me.getOpt('catcherUrlPrefix'),
            catcherFieldName = me.getOpt('catcherFieldName');

        var remoteImages = [],
            imgs = domUtils.getElementsByTagName(me.document, "img"),
            backgroundimagestags = domUtils.getElementsByTagName(me.document, "section span div p "),//抓取背景图片所在的标签
            test = function (src, urls) {
                if (src.indexOf(location.host) != -1 || /(^\.)|(^\/)/.test(src)) {
                    return true;
                }
                if (urls) {
                    for (var j = 0, url; url = urls[j++];) {
                        if (src.indexOf(url) !== -1) {
                            return true;
                        }
                    }
                }
                return false;
            };

        //img标签
        for (var i = 0, ci; ci = imgs[i++];) {
            if (ci.getAttribute("word_img")) {
                continue;
            }
            var src = ci.getAttribute("_src") || ci.src || "";
            if (/^(https?|ftp):/i.test(src) && !test(src, catcherLocalDomain)) {
                remoteImages.push(src);
            }
        }

        //背景图片所在标签
        var backgroundimages = [];
        // console.log("背景图片个数:" + backgroundimagestags.length);
        for (var i = 0, backci; backci = backgroundimagestags[i++];) {

            var bstyle = backci.style;
            var backgroundimgurltag = bstyle['background-image'] || bstyle['background'] || "";
            if (backgroundimgurltag != null && backgroundimgurltag != "") {
                var backsrc = backgroundimgurltag.split("(")[1].split(")")[0].replace(/\"/g, "")
                    || backgroundimgurltag.split("(")[1].split(")")[0].replace(/\"/g, "")
                    || "";
                // console.log("ci_src:" + backsrc);
                if (backsrc != null && backsrc != "") {
                    if (/^(https?|ftp):/i.test(backsrc) && !test(backsrc, catcherLocalDomain)) {
                        backgroundimages.push(backsrc);
                        remoteImages.push(backsrc);
                    }
                }
            }
            // console.log("remoteImages个数:" + remoteImages.length);
        }

        if (remoteImages.length) {
            me.fireEvent('catchremotestart');
            catchremoteimage(remoteImages, {
                //成功抓取
                success: function (r) {
                    try {
                        var info = r.state !== undefined ? r:eval("(" + r.responseText + ")");
                    } catch (e) {
                        return;
                    }

                    /* 获取源路径和新路径 */
                    var i, j, ci, cj, oldSrc, newSrc, list = info.list;


                    //img标签的替换
                    for (i = 0; ci = imgs[i++];) {
                        oldSrc = ci.getAttribute("_src") || ci.src || "";
                        for (j = 0; cj = list[j++];) {
                            if (oldSrc == cj.source && cj.state == "SUCCESS") {  //抓取失败时不做替换处理
                                newSrc = catcherUrlPrefix + cj.url;
                                domUtils.setAttributes(ci, {
                                    "src": newSrc,
                                    "_src": newSrc
                                });
                                break;
                            }
                        }
                    }

                    //背景图片地址的替换
                    var bodyHtml = me.document.body.innerHTML;
                    console.log("上传之前html:" + bodyHtml);
                    for (var a = 0; a < backgroundimages.length; a++) {
                        oldSrc = backgroundimages[a] || "";
                        for (j = 0; cj = list[j++];) {
                            if (oldSrc == cj.source && cj.state == "SUCCESS") {  //抓取失败时不做替换处理
                                newSrc = catcherUrlPrefix + cj.url;
                                console.log("上传之后oldSrc:" + oldSrc);
                                console.log("上传之后newSrc:" + newSrc);
                                // console.log("上传之后html:" + me.document.body.innerHTML.replace(oldSrc, newSrc));

                                //判断旧地址中,是不是有双引号,有的话,替换成单引号
                                if(bodyHtml.indexOf('&quot;'+oldSrc +'&quot;') ){
                                    console.log(45674567890);
                                    bodyHtml = bodyHtml.replace('&quot;'+oldSrc +'&quot;', '&#39;'+newSrc +'&#39;');
                                }else{
                                    console.log("不用替换");
                                    bodyHtml = bodyHtml.replace(oldSrc, newSrc);
                                }

                                console.log("替换之后html:" + bodyHtml);
                                break;
                            }
                        }
                    }
                    me.document.body.innerHTML = bodyHtml;

                    me.fireEvent('catchremotesuccess');
                    me.fireEvent('catchremotecomplete');
                },
                //回调失败,本次请求超时
                error: function () {
                    me.fireEvent("catchremoteerror");
                }
            });
        }

        function catchremoteimage(imgs, callbacks) {
            console.log("1111L:" + imgs.length);
            var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '',
                url = utils.formatUrl(catcherActionUrl + (catcherActionUrl.indexOf('?') == -1 ? '?':'&') + params),
                isJsonp = utils.isCrossDomainUrl(url),
                opt = {
                    'method': 'POST',
                    'dataType': isJsonp ? 'jsonp':'',
                    'timeout': 60000, //单位:毫秒,回调请求超时设置。目标用户如果网速不是很快的话此处建议设置一个较大的数值
                    'onsuccess': callbacks["success"],
                    'onerror': callbacks["error"]
                };
            opt[catcherFieldName] = imgs;
            ajax.request(url, opt);
        }

    });
};

3.config.json中加入微信公众号图片地址白名单"mmbiz.qpic.cn"

"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com","mmbiz.qpic.cn"],

参考文章:https://blog.youkuaiyun.com/snow_love_xia/article/details/140012580

7.部署到服务器之后,会员头像不显示?

检查配置文件中,fs.root文件保存路径是否正确。

8.ueditor上传文章后,默认将第一张图片作为文章列表的封面

public static String getFirstImgStr(String htmlStr, String defaultStr) {
		String img = "";
		Pattern p_image;
		Matcher m_image;
		// String regEx_img = "<img.*src=(.*?)[^>]*?>"; //图片链接地址
		String regEx_img = "<img.*src\\s*=\\s*(.*?)[^>]*?>";
		p_image = Pattern.compile(regEx_img, Pattern.CASE_INSENSITIVE);
		m_image = p_image.matcher(htmlStr);
		while (m_image.find()) {
			// 得到<img />数据 不懂的qq1023732997
			img = m_image.group();
			// 匹配<img>中的src数据
			Matcher m = Pattern.compile("src\\s*=\\s*\"?(.*?)(\"|>|\\s+)").matcher(img);
			while (m.find()) {
				return m.group(1);
			}
		}
		return defaultStr;
	}

9.ueditor上传图片在线管理不显示

 10.图片搜索中不显示?

11.微信下拉刷新不显示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Muxiyale

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值