Comparison of CKEditor and UEditor usage
Originally, the project used the rich text editor function that CKEditor has been made, but the business has changed to UEditor in consideration of aesthetics, so let's summarize it here
Let me first talk about my thoughts on using these two different plugins. The ueditor I used is version 1.4.3: (ueditor API)
UEditor: ueditor focuses more on user experience and is simpler to use than ckeditor, but ueditor is slightly troublesome compared to ckeditor when dealing with front and back-end interactions.
ckeditor: ckeditor is not like ueditor. More methods need to be implemented by themselves, but after all, it is an old rich text editor. If you have written these methods before, I personally think it is more convenient and simpler than ueditor.
Use of CKEditor
Introduce ckeditor under the jsp page (of course, first of all, you need to introduce the plug-in library ckeditor-Java-core-3.5.)
<script type="text/javascript" src="${basePath}/js/ckeditor/"></script>
//After introducing js, add a property richText="true" on the textarea tag
<textarea name="" richText="true" cols="110" rows="15"></textarea>
Get the content in ckeditor
Var content = (content); //initialization $(function() { // Rich text field initialization$("[richText]").each(function (e) { ($(this).attr("id"),{ height : 400, skin : 'kama', language : 'zh-cn', filebrowserImageUploadUrl:'${basePath}/wxdate/ck_upload.action?fileType=1', toolbar: 'ToolbarCommon', resize_enabled: false }); }); });
Action Configuration
<!-- FckEditUpload--> <action name="ck_upload" class=""> <param name="fileSize">5120000</param> <!-- Upload文件大小 --> </action>
CkeditorUploadAction class source code
//CkeditorUploadAction class source codepublic class CkeditorUploadAction extends ActionSupport { private static final long serialVersionUID = 1L; private File upload; private String uploadContentType; private String uploadFileName; //File size private long fileSize; //Get file path private String fileType; public String getFileType() { return fileType; } public void setFileType(String fileType) { = fileType; } public long getFileSize() { return fileSize; } public void setFileSize(long fileSize) { = fileSize; } public File getUpload() { return upload; } public void setUpload(File upload) { = upload; } public String getUploadContentType() { return uploadContentType; } public void setUploadContentType(String uploadContentType) { = uploadContentType; } public String getUploadFileName() { return uploadFileName; } public void setUploadFileName(String uploadFileName) { = uploadFileName; } public String execute() throws Exception { try { HttpServletResponse response = (); ("text/html;charset=UTF-8"); PrintWriter out = (); String callback = ().getParameter("CKEditorFuncNum"); //Check the file if(upload==null || uploadContentType==null || uploadFileName==null){ //("<font color=\"red\" size=\"2\">*Please select Upload file</font>"); String path = ""; String alt_msg = "*Please select Upload file"; ("<script type='text/javascript'>(" + callback + ", '" + path + "' , '" + alt_msg + "');</script>"); return null; } if ((("image/pjpeg") || ("image/jpeg")) && ((() - 4).toLowerCase().equals(".jpg")||(() - 5).toLowerCase().equals(".jpeg"))) { //The headimageContentType of the jpg image uploaded by IE6 is image/pjpeg, while the jpg image uploaded by IE9 and Firefox is image/jpeg }else if((("image/x-png") || ("image/png")) && (() - 4).toLowerCase().equals(".png")){ }else if(("image/gif") && (() - 4).toLowerCase().equals(".gif")){ }else if(("image/bmp") && (() - 4).toLowerCase().equals(".bmp")){ }else{ //("<script language=\"javascript\">alert(\"*File format is incorrect (must be .jpg/.gif/.bmp/.png file)\");return false;</script>"); String path = ""; String alt_msg = "*Please select the image file format (must be .jpg/.jpeg/.gif/.bmp/.png file)"; ("<script type='text/javascript'>(" + callback + ", '" + path + "' , '" + alt_msg + "');</script>"); return null; } if(() > ()){ //("<font color=\"red\" size=\"2\">*The file size must not be greater than "+()/(1000*1024)+"m</font>"); String path = ""; String alt_msg = "*Please select Upload"+()/(1000*1024)+"Picture files within M"; ("<script type='text/javascript'>(" + callback + ", '" + path + "' , '" + alt_msg + "');</script>"); return null; } String imagePath = ""; //imagePath setting WebApplicationContext wac = (); WxConfig wxConfig = (WxConfig)("wxConfig"); //if((PubParaConstants.DC_CK_UPLOAD_PATTH_PARAM.DC_CK_UPLOAD_PATTH_PARAM_PROSELECT)) { imagePath = (); //} //WxConfig wxConfig; File directory = new File(imagePath); if(!()) { (); } //Save the file to the project directory InputStream is = new FileInputStream(upload); Date date = new Date(); // Get system time to generate file name long lTime = (); String fileName = (date, 8)+"_"+lTime; fileName += (uploadFileName); File toFile = new File(imagePath, fileName); OutputStream os = new FileOutputStream(toFile); byte[] buffer = new byte[1024]; int length = 0; while ((length = (buffer)) > 0) { (buffer, 0, length); } (); (); //Set back to the "Image" tab String callbackUrl = ().getContextPath() +"/?fold="+()+"&imageName="+fileName; ("<script type=\"text/javascript\">"); ("(" + callback + ",'"+ callbackUrl + "','')"); ("</script>"); } catch (Exception e) { (); } return null; } }
Image echoing to the editor's servlet code
/** * Read local image files in file streaming (image echo processing) * FckImageReaderServlet */ public class FckImageReaderServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void init() throws ServletException { } public void doGet(HttpServletRequest request, HttpServletResponse response) { (request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) { try { //Get the file name String imageName = ("imageName"); String foldType = ("fold"); String imagePath = ""; //imagePath setting WebApplicationContext wac = (); WxConfig wxConfig = (WxConfig)("wxConfig");//Module configuration file //if((PubParaConstants.DC_CK_UPLOAD_PATTH_PARAM.DC_CK_UPLOAD_PATTH_PARAM_PROSELECT)) { imagePath = (); //} if (imageName != null) { String imageExt = ((".") + 1); //Extension //Get the configuration file path String imageDir = imagePath+"/"+imageName; //Global path of file File inputFile = new File(imageDir); if (()) { //BufferedImage input = (inputFile); // Image cache is prohibited. ("Pragma", "no-cache"); ("Cache-Control", "no-cache"); ("Expires", 0); //("image/jpeg"); // Output the image to the Servlet output stream.// ServletOutputStream sos = (); // (input, imageExt, sos); // (); // (); InputStream in = new FileInputStream(inputFile); OutputStream os = (); //Create output stream byte[] b = new byte[1024]; while( (b)!= -1){ (b); } (); (); (); } } } catch (Exception e) { (); } } }
ConfigurationFckImageReaderServlet <!-- FCK --> <servlet> <servlet-name>FckReader</servlet-name> <servlet-class>com.***.</servlet-class> </servlet> <servlet-mapping> <servlet-name>FckReader</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>
Let’s look at UEditor again:
//Introduce related js and css <script type="text/javascript" src="${basePath}/js/ueditor/"></script> <script type="text/javascript" src="${basePath}/js/ueditor/"></script> <link type="text/css" rel="stylesheet" href="${basePath}/js/ueditor/themes/default/css/" rel="external nofollow" >
jsp page part code:
<form action="<s:url value="/p2p/"/>" method="post" > <tr > <th>Investment Service Process <input type="hidden" name=""/></th> <td> <!-- The container that loads the editor --> <script name="content" type="text/plain">${}</script> <!-- Instantiate editor --> <script type="text/javascript"> var ue = ('container'); </script> </td> </tr> <input type="button" value="save" class="ImgButton" onclick="submitForm"/> </form> <script type="text/javascript"> function submitForm(){ $("#hidInvestProcess").val(()); $("#form").submit(); }
Having said so much, how to modify the file last time using ueditor? In version 1.4.3, find ueditor\jsp\file
Find the "imageUrlPrefix" of the last image configuration item: "/", /* Image access path prefix */ "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}" //This is the upload path I have changed
Note that you need to modify imageUrlPrefix, because the image display path in the editor is imageUrlPrefix+imagePathFormat. If you do not modify imageUrlPrefix, the imagePathFormat upload path is the relative path relative to the server.
The most important thing to use ueditor is to modify the filters of struts. The front desk of this project requires all endings with .html. If not modified, struts will treat the uploaded static page as an action and will report 404. The modification code is as follows:
<filter> <filter-name>struts2</filter-name> <filter-class>com.***.***.</filter-class> <init-param> <param-name>config</param-name> <param-value>../config/</param-value> </init-param> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
filter code
public class CommonFilter extends StrutsPrepareAndExecuteFilter{ @Override public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException { HttpServletRequest request = (HttpServletRequest)req; String url = (); if(("/ueditor")){ (req, resp); }else{ (req, resp, chain); } } }
If you have any questions, please feel free to correct them.