百度UEditor的坑--2018--10--29

下载百度ueditor的jar包 下载压缩包 

解压后的目录

2.将jar加入到你的webapp或者是webConetnt(我的是webContent)

3.在页面添加ueditor的HTML和js代码

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" charset="utf-8" src="${base}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${base}/ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在

配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${base}/ueditor/lang/zh-cn/zh-cn.js"></script>

<h1>商品描述</h1><!--初始化ueditor编辑器-->
<script id="editor" type="text/plain" style="width:850px;height:500px;"></script>

<script>
	//创建ueditor编辑器
	var ue = UE.getEditor('editor');

	//重新定义图片上传图路径
	UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
	UE.Editor.prototype.getActionUrl = function(action) {
		if(action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
			return '/ueditor/upload/image.jhtml';//自己定义的上传url路径
		} else {
			return this._bkGetActionUrl.call(this, action);
		}
	}
	//获取上传成功返回json数据进行回显
	var root = UE.htmlparser(UE.getEditor('articleContent').getContent(), true);
	var imgs = new Array();
	imgs = root.getNodesByTagName('img');
	var ueImg = {};
	for(var i = 0; i < imgs.length; i++) {
		console.log(imgs[i].getAttr('src'));
		if(!portal.utils.isEmpty(imgs[i].getAttr('alt'))) {
			var url = imgs[i].getAttr('src');
			var urlArray = imgs[i].getAttr('src').split("/");
			if(portal.utils.isEmpty(ueImg.oriName)) {
				ueImg.oriName = imgs[i].getAttr('alt');
				ueImg.newName = urlArray[urlArray.length - 1];
				ueImg.filePath = urlArray[3] + "/" + urlArray[4] + "/";
			} else {
				ueImg.oriName += "," + imgs[i].getAttr('alt');
				ueImg.newName += "," + urlArray[urlArray.length - 1];
				ueImg.filePath += "," + urlArray[3] + "/" + urlArray[4] + "/";
				alert(ueImg.oriName);
			}
		}

	}
</script>

4.由于我是用的是springmvc框架作为web端的框架 索引不能直接运行jsp文件 只好参考网上大牛的博客 这是jsp代码 把这些代码转换成自己的controller控制层,由于修改了这个地方,需要修改ueditor.config.js

// 服务器统一请求接口路径
  , serverUrl: URL + "/config/getConfig.jhtml"

在这里如果配置不对会出现

后端配置项没有正常加载 上传插件不能正常使用

再上传页面的地方(需要注意)
需要将config.json 放在ueditor/config 它会自动加载这个json文件,如果找不到就会出
现异常 这个config是根据 上面的url config/getConfig.jhtml 自定义的

5.使用自定义的方式进行图片上传

//重新定义图片上传图路径
	UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
	UE.Editor.prototype.getActionUrl = function(action) {
		if(action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
			return '/ueditor/upload/image.jhtml';//自己定义的上传url路径
		} else {
			return this._bkGetActionUrl.call(this, action);
		}
	}

以下是java代码

package com.amysky.wxmember.controller;

import java.io.File;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.amysky.wxmember.utils.FileInputImageUtils;
import com.baidu.ueditor.ActionEnter;

@Controller
@RequestMapping("/ueditor")
public class UeditorController {

	@RequestMapping("/config/getConfig.jhtml")
	@ResponseBody
	public String config(HttpServletRequest request) {

		String rootPath = request.getSession().getServletContext().getRealPath("/");
		return new ActionEnter(request, rootPath).exec();
	}

	@ResponseBody
	@RequestMapping(value = "/upload/image", method = RequestMethod.POST)
	public Map<String, Object> uploadImage(@RequestParam("upfile") MultipartFile upfile, HttpServletRequest request) {

		
		String getRealPath = "upload";
		
		String fileName = "commodity";
		
		String createFilePath = "wxmember" + File.separator + fileName;
		
		Map<String, Object> map = FileInputImageUtils.windowUditor(upfile, getRealPath, createFilePath, request);
		
		return map;
	}
}

/**
	 * 使用百度ueditor上传图片
	 * @param request
	 * @param getRealPath
	 * @param createFilePath
	 * @return
	 */
	public static Map<String,Object> windowUditor(MultipartFile multipartFile,String getRealPath, String createFilePath,HttpServletRequest request) {
		Map<String,Object> map = new HashMap<String,Object>();
		InputStream is=null;
		OutputStream os =null;
		try {
			//获取文件名称
			String originalFilename = multipartFile.getOriginalFilename();
			//获取文件的后缀
			String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
			//使用现在的 时间作为图片的新名称
			String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
			
			//获取文件夹在Windows上的 真是文件路径 例如: upload文件夹
			String realPath = request.getServletContext().getRealPath(getRealPath);
			//创建保存图片的文件夹
			String path=realPath+File.separator+createFilePath;
			//不存在就创建
			File file = new File(path);
			if(!file.exists()){
				file.mkdirs();
			}
			//保存文件
			file=new File(path+File.separator+fileName+suffix);
			
			is = multipartFile.getInputStream();
			os= new FileOutputStream(file);
			//拷贝文件
				copyFile(is, os);
				map.put("state", "SUCCESS");
				map.put("original", originalFilename);
				map.put("name", fileName);
				map.put("url", getRealPath+File.separator+createFilePath+File.separator+fileName+suffix);
				map.put("type", suffix);
				map.put("size", multipartFile.getSize());
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			try {
				os.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
			try {
				is.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return map;
	}

/**
	 * 文件拷贝
	 * 
	 * @param is
	 * @param os
	 * @throws IOException
	 */
	private static void copyFile(InputStream is, OutputStream os) throws IOException {
		byte[] b = new byte[1024];
		int len = 0;
		while ((len = is.read(b)) != -1) {
			os.write(b, 0, len);
		}
		os.flush();
	}
	

前端页面解析json数据代码

//获取上传成功返回json数据进行回显
	var root = UE.htmlparser(UE.getEditor('articleContent').getContent(), true);
	var imgs = new Array();
	imgs = root.getNodesByTagName('img');
	var ueImg = {};
	for(var i = 0; i < imgs.length; i++) {
		console.log(imgs[i].getAttr('src'));
		if(!portal.utils.isEmpty(imgs[i].getAttr('alt'))) {
			var url = imgs[i].getAttr('src');
			var urlArray = imgs[i].getAttr('src').split("/");
			if(portal.utils.isEmpty(ueImg.oriName)) {
				ueImg.oriName = imgs[i].getAttr('alt');
				ueImg.newName = urlArray[urlArray.length - 1];
				ueImg.filePath = urlArray[3] + "/" + urlArray[4] + "/";
			} else {
				ueImg.oriName += "," + imgs[i].getAttr('alt');
				ueImg.newName += "," + urlArray[urlArray.length - 1];
				ueImg.filePath += "," + urlArray[3] + "/" + urlArray[4] + "/";
				alert(ueImg.oriName);
			}
		}

	}

6.进行图片回显 否则会在富文本编辑中不显示图片

我修改的地方是 

"imageUrlPrefix": "http://localhost:8080/", /* 图片访问路径前缀 */

加入自己的网址或者本地访问方式

最终的效果图

最后获取富文本编辑器中的内容

content=UE.getEditor('editor').getContent();

也可以参考 ueditor文件夹中的那些js函数

7.百度富文本编辑内容回显

<script id="editor" type="text/plain" style="width:850px;height:500px;">
        ${amyskyWxMemberCommodityDetailEntity.describer} 
</script>

直接把内容放入到这个<script></script>标签内就行