富文本编辑器

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

首先准备工作

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

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

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

[html]  view plain  copy

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

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

[html]  view plain  copy

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

实例化编辑器

[html]  view plain  copy

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

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

[html]  view plain  copy

1. //获取富文本编辑器内容  
2. function getContent() {  
3.     return UE.getEditor('editor').getContent();  
4. }  
5. //设置编辑器内容  
6. function setContent() {  
7.     UE.getEditor('editor').setContent("内容");  
8. }  

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

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

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

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

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

[java]  view plain  copy

1. package com.baidu.ueditor.upload;  
2.   
3. import com.baidu.ueditor.PathFormat;  
4. import com.baidu.ueditor.define.AppInfo;  
5. import com.baidu.ueditor.define.BaseState;  
6. import com.baidu.ueditor.define.FileType;  
7. import com.baidu.ueditor.define.State;  
8.   
9. import java.io.IOException;  
10. import java.io.InputStream;  
11. import java.util.Arrays;  
12. import java.util.List;  
13. import java.util.Map;  
14.   
15. import javax.servlet.http.HttpServletRequest;  
16.   
17. import org.apache.commons.fileupload.FileItemIterator;  
18. import org.apache.commons.fileupload.FileItemStream;  
19. import org.apache.commons.fileupload.FileUploadException;  
20. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
21. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
22.   
23. public class BinaryUploader {  
24.   
25.     public static final State save(HttpServletRequest request,  
26.             Map<String, Object> conf) {  
27.         FileItemStream fileStream = null;  
28.         boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;  
29.   
30.         if (!ServletFileUpload.isMultipartContent(request)) {  
31.             return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);  
32.         }  
33.   
34.         ServletFileUpload upload = new ServletFileUpload(  
35.                 new DiskFileItemFactory());  
36.   
37.         if ( isAjaxUpload ) {  
38.             upload.setHeaderEncoding( "UTF-8" );  
39.         }  
40.   
41.         try {  
42.             FileItemIterator iterator = upload.getItemIterator(request);  
43.   
44.             while (iterator.hasNext()) {  
45.                 fileStream = iterator.next();  
46.   
47.                 if (!fileStream.isFormField())  
48.                     break;  
49.                 fileStream = null;  
50.             }  
51.   
52.             if (fileStream == null) {  
53.                 return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);  
54.             }  
55.   
56.             String savePath = (String) conf.get("savePath");  
57.             String originFileName = fileStream.getName();  
58.             String suffix = FileType.getSuffixByFilename(originFileName);  
59.   
60.             originFileName = originFileName.substring(0,  
61.                     originFileName.length() - suffix.length());  
62.             savePath = savePath + suffix;  
63.   
64.             long maxSize = ((Long) conf.get("maxSize")).longValue();  
65.   
66.             if (!validType(suffix, (String[]) conf.get("allowFiles"))) {  
67.                 return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);  
68.             }  
69.   
70.             savePath = PathFormat.parse(savePath, originFileName);  
71.                         //savePath为config.json设置的文件名  
72.             String physicalPath = (String) conf.get("rootPath") + savePath;  
73.   
74.             InputStream is = fileStream.openStream();  
75.                         //把这里替换成自己的上传方法  
76.                         State storageState = StorageManager.saveFileByInputStream(is,  
77.                     physicalPath, maxSize);  
78.             is.close();  
79.   
80.             if (storageState.isSuccess()) {  
81.                                 //url返回前缀，需要改成服务器地址前缀  
82.                                 storageState.putInfo("url", PathFormat.format(savePath));  
83.                 storageState.putInfo("type", suffix);  
84.                 storageState.putInfo("original", originFileName + suffix);  
85.             }  
86.   
87.             return storageState;  
88.         } catch (FileUploadException e) {  
89.             return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);  
90.         } catch (IOException e) {  
91.         }  
92.         return new BaseState(false, AppInfo.IO_ERROR);  
93.     }  
94.   
95.     private static boolean validType(String type, String[] allowTypes) {  
96.         List<String> list = Arrays.asList(allowTypes);  
97.   
98.         return list.contains(type);  
99.     }  
100. }  

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

[javascript]  view plain  copy

1. var content = '<p>  
2. </p><h1>又一对姐弟恋诞生！倪妮井柏然经纪人承认恋情</h1><p>  
3. </p><p>2016年03月 6日 20:53 网易娱乐</p><p>  
4. </p>';  

有很多换行符，但js字符串有换行的话要用加号连接，解决办法是在java后台代码中就处理掉换行，content = content.replaceAll("\n", " "); 把所有的换行符去掉就ok了

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