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;} }

總結

以上是生活随笔為你收集整理的IDempiere 富文本编辑器优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。