关于使用百度UEditor富文本编辑器的总结

这段时间公司有个需求要用到富文本编辑器，在这里做一个小小的使用总结吧。

首先准备工作

到官网下载http://ueditor.baidu.com/website/ 将编辑器下载下来

技术文档 http://fex.baidu.com/ueditor/

可以在demo里面看到，先引入js

<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>

要使用编辑器的话，在需要引入的位置中加入

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

实例化编辑器

<script type="text/javascript">
//建议使用工厂方法getEditor创建和引用编辑器实例
var ue = UE.getEditor('editor');
</script>

其他一下方法在demo里面都有，比较常用的

//获取富文本编辑器内容
function getContent() {
return UE.getEditor('editor').getContent();
}
//设置编辑器内容
function setContent() {
    UE.getEditor('editor').setContent("内容");
}

准备工作做好之后，遇到了图片上传问题，弄了好长时间，发现需要在config.json配置上传路径和前缀，需要导入jar包





图片的上传是 com.baidu.ueditor.ActionEnter 这个jar包里面的servlet，这个servlet上传图片是会上传到本地项目下

如果需要自己写一个上传的action，传到自己的服务器下的某个地址，则需要修改源码，下面我有注释的地方就是需要修改的

--------------------------------自定义上传到其他服务器---------------------------

从官网上下载下来源码  \ueditor1_4_3-src\jsp\src 这个下面就是jar包里的源码 ，修改
BinaryUploader.java

package com.baidu.ueditor.upload;

import com.baidu.ueditor.PathFormat;
import com.baidu.ueditor.define.AppInfo;
import com.baidu.ueditor.define.BaseState;
import com.baidu.ueditor.define.FileType;
import com.baidu.ueditor.define.State;

import java.io.IOException;
import java.io.InputStream;
import java.util.Arrays;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class BinaryUploader {

public static final State save(HttpServletRequest request,
Map<String, Object> conf) {
FileItemStream fileStream = null;
boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;

if (!ServletFileUpload.isMultipartContent(request)) {
return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
}

ServletFileUpload upload = new ServletFileUpload(
new DiskFileItemFactory());

if ( isAjaxUpload ) {
upload.setHeaderEncoding( "UTF-8" );
}

try {
FileItemIterator iterator = upload.getItemIterator(request);

while (iterator.hasNext()) {
fileStream = iterator.next();

if (!fileStream.isFormField())
break;
fileStream = null;
}

if (fileStream == null) {
return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
}

String savePath = (String) conf.get("savePath");
String originFileName = fileStream.getName();
String suffix = FileType.getSuffixByFilename(originFileName);

originFileName = originFileName.substring(0,
originFileName.length() - suffix.length());
savePath = savePath + suffix;

long maxSize = ((Long) conf.get("maxSize")).longValue();

if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
}

savePath = PathFormat.parse(savePath, originFileName);
//savePath为config.json设置的文件名
String physicalPath = (String) conf.get("rootPath") + savePath;

InputStream is = fileStream.openStream();
//把这里替换成自己的上传方法
 State storageState = StorageManager.saveFileByInputStream(is,
physicalPath, maxSize);
is.close();

if (storageState.isSuccess()) {
//url返回前缀，需要改成服务器地址前缀
 storageState.putInfo("url", PathFormat.format(savePath));
storageState.putInfo("type", suffix);
storageState.putInfo("original", originFileName + suffix);
}

return storageState;
} catch (FileUploadException e) {
return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);
} catch (IOException e) {
}
return new BaseState(false, AppInfo.IO_ERROR);
}

private static boolean validType(String type, String[] allowTypes) {
List<String> list = Arrays.asList(allowTypes);

return list.contains(type);
}
}

后来测试的时候发现一个bug，就是如果在编辑器中存入大量样式的时候，会生成很多标签，存到数据库，再重新编辑的时候想再回显放入编辑器，用js放入报错

var content = '<p>
</p><h1>又一对姐弟恋诞生！倪妮井柏然经纪人承认恋情</h1><p>
</p><p>2016年03月 6日 20:53 网易娱乐</p><p>
</p>';有很多换行符，但js字符串有换行的话要用加号连接，解决办法是在java后台代码中就处理掉换行，content = content.replaceAll("\n", " "); 把所有的换行符去掉就ok了

后续如果有补充，会回来修复一下