ueditor图片上传，以及图片路径保存进数据库

标签：正则表达式   图片上传   ueditor   保存图片地址   

前段时间一直忙于各种事，今天有点空也不是很困，就来写写文章吧，写的东西如题

那么我就按顺序进行说明一下吧

先废话一句吧，什么ueditor?

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点

那好，我们就来使用一下它

一：首先我们到官网下载ueditor（网址：http://ueditor.baidu.com/website/download.html），我这里使用java写的，所以选择jsp版本的进行下载，然后解压

下载：

解压：

然后我喜欢重命名为ueditor，因为这名字太长，我引入的时候写起麻烦，然后将这个文件夹拷贝到项目中去，我用的myeclipse，所以我直接拷贝到WebRoot中

然后我们在jsp页面引入它，进行使用

<!-- 配置文件 -->
    <script type="text/javascript" src="admin/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="admin/ueditor/ueditor.all.js"></script>

<script id="container" name="content" type="text/plain">
 
    </script>

<!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container', {
            toolbars: [
                       ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'autotypeset', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                        'indent', '|',
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                        'link', 'unlink', 'anchor', '|',
                        'simpleupload', 'emotion', 'scrawl', 'insertvideo', 'attachment', '|',
                        'spechars', '|',
                        'inserttable', 'deletetable', 'charts', '|',
                        'print', 'preview', 'searchreplace',]
                   ],
                   autoHeightEnabled: true,
                   autoFloatEnabled: true
               });
        
    </script>

二：配置ueditor的配置文件，这样图片上传功能才能实现

我们打开如下文件

配置其中的图片访问路径前缀和图片的保存路径

图片访问前缀就是图片访问的地址去掉图片名称的部分，比如我配置的是：http://127.0.0.1:8080/项目名称

然后图片保存路径我配置的是 ： /upload/image/{yyyy}{mm}{dd}/{time}{rand:6}

这样图片上传功能就实现了，当然后台要做些处理，比如前台的数据发送到后台，后台保存，并且前台调用后台数据显示

但是这样我可能把图片和内容混在一起保存，如果我想单独提取内容里面的图片该怎么办

三，使用正则表达式提取内容里的图片路径

首先我后台获取前台提交过来的ueditor中的内容，然后我用正则表达式获取内容里所有图片的地址，先看一下我的正则表达式工具类吧，这个我觉得写的不错，是网上搜集的一个

ImgUtil.java

package com.test.util;

import java.util.ArrayList;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class ImgUtil {
	/**
	 * 从HTML源码中提取图片路径，最后以一个 String 类型的 List 返回，如果不包含任何图片，则返回一个 size=0　的List
	 * 需要注意的是，此方法只会提取以下格式的图片：.jpg|.bmp|.eps|.gif|.mif|.miff|.png|.tif|.tiff|.svg|.wmf|.jpe|.jpeg|.dib|.ico|.tga|.cut|.pic
	 * @param htmlCode HTML源码
	 * @return <img>标签 src 属性指向的图片地址的List集合
	 * @author Carl He
	 */
	public static List<String> getImageSrc(String htmlCode) {
		List<String> imageSrcList = new ArrayList<String>();
		Pattern p = Pattern.compile("<img\\b[^>]*\\bsrc\\b\\s*=\\s*('|\")?([^'\"\n\r\f>]+(\\.jpg|\\.bmp|\\.eps|\\.gif|\\.mif|\\.miff|\\.png|\\.tif|\\.tiff|\\.svg|\\.wmf|\\.jpe|\\.jpeg|\\.dib|\\.ico|\\.tga|\\.cut|\\.pic)\\b)[^>]*>", Pattern.CASE_INSENSITIVE);
		Matcher m = p.matcher(htmlCode);
		String quote = null;
		String src = null;
		while (m.find()) {
			quote = m.group(1);
			src = (quote == null || quote.trim().length() == 0) ? m.group(2).split("\\s+")[0] : m.group(2);
			imageSrcList.add(src);
		}
		return imageSrcList;
	}

}

字符串插入，所以这里借助另一个工具类,完成list转成字符串，这里使用StringBuilder不用String是因为String是不可变的，自己下去查查

StringUtil.java

package com.test.util;

import java.util.List;

public class StringUtil {
	public static String listToString(List list, char separator){
		StringBuilder sb = new StringBuilder();
		for(int i=0; i<list.size(); i++){
			sb.append(list.get(i)).append(separator);
		}
		return sb.toString().substring(0,sb.toString().length()-1);
	}

}

List list = ImgUtil.getImageSrc(request.getParameter("content"));
String picturePath = StringUtil.listToString(list, ',');

转成list，然后进行相应的显示使用就可以了

如果有什么不清楚的可以给我留言，或者互相交流，非常欢迎交流反馈

ueditor图片上传，以及图片路径保存进数据库

标签：正则表达式   图片上传   ueditor   保存图片地址   

原文地址：http://blog.csdn.net/lsx991947534/article/details/46586541