百度富文本编辑器 UEditor 1.4.3 + Spring MVC 4.0

宗政和韵
2023-12-01

版本: ueditor 1.4.3.3 jsp utf-8

             spring mvc 4.0.2(是spring+springmvc+mybatis maven 项目)


1. 官网下载ueditor1_4_3_3-utf8-jsp.zip后,解压放到项目里,如src/main/webapp下。


2. 前端页面中导入js文件,并实例化一个编辑器:

    <!-- 配置文件 -->
    <script type="text/javascript" src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/ueditor.all.js"></script>
    
    <script type="text/javascript" charset="utf-8" src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
    
    <script type="text/javascript">
    	//实例化编辑器 
        var ue = UE.getEditor('editor');
    </script>

<div>
	<script id="editor" type="text/plain" style="width:700px;height:300px;"></script>
</div>

3. 将下载解压后 ueditor1_4_3_3-utf8-jsp/utf-8/jsp/lib 下的所有jar包导入到项目中。

(复制粘贴到src/main/webapp/WEB-INF/lib下,项目右键 - Properties - Java Build Path - Libraries - add jars)


4. ueditor1_4_3_3-utf8-jsp/utf-8/jsp下的controller.jsp放到项目WEB-INF/jsp中,后台写:

    @RequestMapping("/ueditorController")
    public String ueditorController(HttpServletRequest request,Model model){  
    	return "controller";
    }
(controller.jsp里的代码弄进后台控制器里,编辑器居然会报错。。)


5. 修改ueditor.config.js中的serverUrl值,如:

serverUrl: "http://localhost:8080/myproject/ueditorController"
     把config.json也放到WEB-INF/jsp中,并根据自己的项目修改里面配置信息,如,上传图片部分中:

    "imageUrlPrefix": "http://localhost:8080/myproject", /* 图片访问路径前缀,如果没有配置,则上传图片后前端编辑器里可能显示不了图片 */
    "imagePathFormat": "/uploadfile/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

6. 如果是spring mvc,会跟ueditor的BinaryUploader.java发生冲突,导致编辑器报“未找到上传数据”。

解决方法:修改ueditor完整源码中BinaryUploader类的save方法后编译,把原ueditor-1.2.2.jar中的BinaryUploader.class文件换掉,重新导入jar包。

BinaryUploader.java中save方法:

	public static final State save(HttpServletRequest request, Map<String, Object> conf) {
		boolean isAjaxUpload = request.getHeader("X_Requested_With") != null;
		if (!ServletFileUpload.isMultipartContent(request)) {
			return new BaseState(false, 5);
		}
		ServletFileUpload upload = new ServletFileUpload(
				new DiskFileItemFactory());
		if (isAjaxUpload) {
			upload.setHeaderEncoding("UTF-8");
		}
		try {
			MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());

            String savePath = (String) conf.get("savePath");
            String originFileName = multipartFile.getOriginalFilename();
            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);
           
            String [] savePathBySplit_temp = savePath.split("/");
            String temp = "";
            String fileName = savePathBySplit_temp[savePathBySplit_temp.length-1];
            for(int i = 1;i < savePathBySplit_temp.length-1; i++){
                if(i!=savePathBySplit_temp.length-2){
                    temp+=savePathBySplit_temp[i]+"/";
                }else{
                    temp+=savePathBySplit_temp[i];
                }
            }
            String pathTemp = request.getSession().getServletContext().getRealPath(temp); 
            //System.out.println(pathTemp+","+fileName);
            //System.out.println(new File(pathTemp).exists());
            File targetFile = new File(pathTemp);
            if(!targetFile.exists()){  
                targetFile.mkdirs();  
            }
            //System.out.println(new File(pathTemp).exists());
            /************/
            //State storageState = StorageManager.saveFileByInputStream(multipartFile.getInputStream(),savePath, maxSize);
            State storageState = StorageManager.saveFileByInputStream(multipartFile.getInputStream(),pathTemp+"/"+fileName, maxSize);

            if (storageState.isSuccess()) {
                storageState.putInfo("url", PathFormat.format(savePath));
                storageState.putInfo("type", suffix);
                storageState.putInfo("original", originFileName + suffix);
            }

            return storageState;

        }catch (Exception e) {
            e.printStackTrace();
            System.out.println(e.getMessage());
        }
        return new BaseState(false, AppInfo.IO_ERROR);
	}

(SpringMVC Ueditor1.4.3 未找到上传数据:http://www.cnblogs.com/vincent4code/p/5809858.html


7. form表单提交编辑器内容,后台可以用 request.getParameter("editorValue") 接收,并存到数据库中。

 类似资料: