下载百度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>标签内就行