IDempiere 富文本编辑器优化

1、CKEditor中文繁体转简体中文

1.1 效果展示

1.2 解决方案

1.2.1 打开WTextEditorDialog.java

1.2.2 将createEditor方法中的lang.put("language", Language.getLoginLanguage().getAD_Language());

替换为

String language = Language.getLoginLanguage().getAD_Language();
lang.put("language", language.equals("zh_CN")?"zh-cn":language);

2、CKEditor添加中文字体

2.1 效果展示

2.2 解决方案

2.2.1

打开org.adempiere.ui.zk-->js-->ckeditor-->config.js

添加下述代码（如果想了解CKEditor的配置可以去官网查看其他API）

代码文本：

config.font_names = '宋体/SimSun;新宋体/NSimSun;仿宋/FangSong;楷体/KaiTi;仿宋_GB2312/FangSong_GB2312;'+  '楷体_GB2312/KaiTi_GB2312;黑体/SimHei;华文细黑/STXihei;华文楷体/STKaiti;华文宋体/STSong;华文中宋/STZhongsong;'+  '华文仿宋/STFangsong;华文彩云/STCaiyun;华文琥珀/STHupo;华文隶书/STLiti;华文行楷/STXingkai;华文新魏/STXinwei;'+  '方正舒体/FZShuTi;方正姚体/FZYaoti;细明体/MingLiU;新细明体/PMingLiU;微软雅黑/Microsoft YaHei;微软正黑/Microsoft JhengHei;'+  'Arial Black/Arial Black;'+ config.font_names;//配置字体

3、iDempiere富文本编辑器添加表格边框

3.1 效果展示

3.2 解决方案

3.2.1 在ui.zk下创建包org.owasp.html

3.2.2 在org.owasp.html创建Sanitizers

3.2.3 将Jar中的Sanitizers复制到3.2.2

3.2.4 修改TABLES的允许属性

4、CKEditor添加图片上传服务功能

4.1 效果展示

4.2 解决方案

4.2.1 打开org.adempiere.ui.zk-->js-->ckeditor-->config.js

4.2.2 添加filebrowserUploadUrl 属性

"/webui/ckeditor/image/upload" 是上传的响应路径

4.2.3 编写对应的servlet，实现图片储存到磁盘，下面是对应的servlet代码

package org.gogetter.ckeditor.servlet;import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.stream.Stream;import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.compiere.model.MSysConfig;
import org.compiere.util.Env;import com.google.gson.JsonObject;/*** 将图片上传到服务器* * @author Administrator**/
public class CKEditorImageUploadServlet extends HttpServlet {/*** */private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 用户 ID// ckeditor/用户ID/名称// 文件名相同 +时间 年月日时分秒String root = CKEditorImageUtil.getRootPath(request);File file = new File(root);if (!file.exists()) {file.mkdirs();// 创建根根目录}JsonObject res = new JsonObject();// 即将返回前端数据try {DiskFileItemFactory factory = new DiskFileItemFactory();// 创建工厂factory.setRepository(file);// 设置路径// 调用ServletFileUpload.parseRequest方法解析request对象，得到一个保存了所有上传内容的List对象。ServletFileUpload upload = new ServletFileUpload(factory);upload.setHeaderEncoding("utf-8");// 可以解决文件名中文乱码upload.setFileSizeMax(CKEditorImageUtil.getFileMaxSize());// 设置最大上传文件大小List<FileItem> items = upload.parseRequest(request);// 获取所有的上传// 目前先 来指定一个if (items.isEmpty()) {throw new Exception("请先选择上传文件!!!");}String fileName = "";for (FileItem item : items) {if (item.isFormField()) {continue;}fileName = CKEditorImageUtil.getFileNewName(item.getName());// 校验文件类型boolean validate = CKEditorImageUtil.typeValidate(fileName);if (!validate) {CKEditorImageUtil.formatErrorMessage(request, response);return;}String newFileName = root + "/" + fileName;File newFile = new File(newFileName);item.write(newFile);// 写入文件item.delete();// 清除}res.addProperty("uploaded", 200);res.addProperty("fileName", "test.jpg");res.addProperty("url", "/webui/ckeditor/image/preview/" + fileName);} catch (Exception excep) {// TODO: handle exceptionJsonObject msg = new JsonObject();res.addProperty("uploaded", 500);msg.addProperty("message", excep.getMessage());res.add("error", msg);// 异常}response.setCharacterEncoding("utf-8");response.setContentType("application/json");response.getWriter().write(String.valueOf(res));return;}}

5、CKEditor添加浏览服务器功能

5.1 效果展示

5.2 解决方案

5.2.1 打开org.adempiere.ui.zk-->js-->ckeditor-->config.js

5.2.2 添加filebrowserBrowseUrl属性

'/webui/ckeditor/image/browse' 对应的是浏览服务器的响应路径

5.2.3 编写对应的servlet，实现浏览服务器图片，下面是对应的servlet代码

package org.gogetter.ckeditor.servlet;import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.Calendar;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.compiere.util.Env;/*** 将图片上传到服务器* @author Administrator**/
@MultipartConfig
public class CKEditorImageBrowseServlet extends HttpServlet {/*** */private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取路径String root = CKEditorImageUtil.getRootPath(request);//如果文件夹不存在 直接返回File serverFile = new File(root);if(!serverFile.exists()) {//服务器目录不存在CKEditorImageUtil.fileNotExistMessage(request, response);return;}//获取路径下的所有文件 因为时指定路径 所以不存在 文件夹File[] files = serverFile.listFiles();if(files.length == 0) {CKEditorImageUtil.fileNotExistMessage(request, response);return;}response.setContentType("text/html");response.setCharacterEncoding("UTF-8");String callback = request.getParameter("CKEditorFuncNum");PrintWriter out = null;StringBuilder sb = new StringBuilder();sb.append("<!DOCTYPE html>").append("<html>").append("<head>").append("<title>Gogetter服务器文件</title>").append("</head>").append("<body>");//csssb.append("   <style type='text/css'>\r\n"+ "      .images {\r\n"+ "        width: 150px;\r\n"+ "        height: 100%;\r\n"+ "        float: left;\r\n"+ "        word-break: break-all;\r\n"+ "        padding: 5px;\r\n"+ "        margin: 30px;\r\n"+ "        align-items: center;\r\n"+ "      }\r\n"+ "\r\n"+ "      .images img {\r\n"+ "        border: none;\r\n"+ "        width: 145px;\r\n"+ "        height: 145px;\r\n"+ "        box-shadow: 3px 3px 2px #888888;\r\n"+ "      }\r\n"+ "      .words {\r\n"+ "        word-wrap: break-word;\r\n"+ "        text-align:center;\r\n"+ "        margin-top: 5px;\r\n"+ "      }\r\n"+ "    </style> ");//fuctionsb.append("<script type='text/javascript'>").append("function previewImage(previewURL){").append("window.opener.CKEDITOR.tools.callFunction(" + callback    + ", previewURL);").append("window.close();").append("}").append("</script>");//div 布局sb.append("<div style=\"display: flex;flex-wrap: wrap;\">");try {out =     response.getWriter();int size = files.length;for(int i= 0; i< size; i++) {//16:10File file = files[i];if(file.isDirectory()) {continue;//文件夹 不考虑}String previewURL = "/webui/ckeditor/image/preview/"+file.getName();sb.append("<div class=\"images\">");sb.append("<a href='javascript:void(0)' onclick= previewImage('"+previewURL+"')>");sb.append("<img class=\"img\" src='"+previewURL+"' title='"+file.getName()+"'/>");sb.append("<div class=\"words\">\r\n"+ "                    <text> "+file.getName()+ "</text>\r\n"+ "                  </div>"); sb.append("</a>");sb.append("</div>");}} catch (Exception e) {// TODO: handle exceptione.printStackTrace();}sb.append("</div></body></html>")；}}

注：针对文件上传和浏览器服务的后续的预览URL需要编写对应的预览servlet，来满足图片显示功能,下面是预览的servlet

package org.gogetter.ckeditor.servlet;import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.ObjectInputFilter.Status;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.util.Calendar;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.compiere.model.MSysConfig;
import org.compiere.util.Env;import com.google.gson.JsonArray;
import com.google.gson.JsonObject;/*** 将图片上传到服务器* @author Administrator**/public class CKEditorImagePreviewServlet extends HttpServlet {/*** */private static final long serialVersionUID = 1L;//ZK_MAX_UPLOAD_SIZE 最大上传大小//文件存储路径  user.dir   /filename@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.创建字节输入流，关联读取的文件// 1.1 获取文件的绝对路径String fileName = getFileName(request.getRequestURI());//校验文件类型boolean validate = CKEditorImageUtil.typeValidate(fileName);// PrintWriter writer = response.getWriter();if(!validate) {CKEditorImageUtil.formatErrorMessage(request, response);return;}  String root = CKEditorImageUtil.getRootPath(request);String realPath = root+"/"+fileName;// 1.2 创建字节输出流对象BufferedInputStream bis = new BufferedInputStream(new FileInputStream(realPath));//2.设置响应头支持的类型  应用支持的类型为字节流/*Content-Type 消息头名称   支持的类型image/jpeg   消息头参数  应用类型为图片*/// resp.setHeader(" Content-Type", "image/jpeg");// 当 header 的 key 是 Content-Type， 可以使用 resp.setContentType 方法response.setContentType("image/jpeg");//3.获取字节输出流对象ServletOutputStream sos = response.getOutputStream();//4.循环读写文件byte[] arr = new byte[1024];int len;while((len = bis.read(arr)) != -1) {sos.write(arr,0,len);}//6.释放资源bis.close();sos.close();      }/*** 获取文件名* @param query* @return*/private String getFileName(String query) {// TODO Auto-generated method stubString fileName = null;try {fileName = URLDecoder.decode(query, "UTF-8").substring(query.lastIndexOf("/")+1);} catch (UnsupportedEncodingException e) {// TODO Auto-generated catch blocke.printStackTrace();}return fileName;}
}