UEditor使用總結(與SpringMVC整合)

最近再弄富文本框，選擇了UEditor,緣由是：界面漂亮，百度開源的
然而，

開啓整合之路（怎麼作）

1.下載插件

下載只有將插件放在Webapp下，如圖

 

 

二、修改

導入以後咱們就須要修改一些參數已知足咱們的需求。如圖

咱們要修改圖片的保存路徑，由於插件默認是保存在項目部署的路徑下，每次從新部署圖片都會消失，因此咱們須要將圖片單獨保存到一個圖片服務器下，展現圖片的controller以下

@RequestMapping(value = "/showImage")
public void showImage(HttpServletRequest request, HttpServletResponse response,String filePath){
String rootPath=request.getSession().getServletContext().getRealPath("/");
String absolutePath=rootPath+filePath;
//截取文件後綴名
String suffix=absolutePath.substring(absolutePath.lastIndexOf(".")+1);
String responseType = "image/jpeg";
if ("png".equals(suffix)) {
responseType = "image/png";
} else if ("jpg".equals(suffix) || "jpeg".equals(suffix)) {
responseType = "image/jpeg";
} else if ("gif".equals(suffix)) {
responseType = "image/gif";
}
response.setContentType(responseType);
FileInputStream inputStream=null;
OutputStream os=null;
try {
int count;
inputStream=new FileInputStream(absolutePath);
os=response.getOutputStream();
byte[] buffer=new byte[1024*1024];
while ((count=inputStream.read(buffer))!=-1){
os.write(buffer,0,count);
}

}catch (IOException ex){
logger.error("圖片找不到{}",ex);
}finally {
if (inputStream!=null){
try {
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (os!=null){
try {
os.flush();
os.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}

}

若是不想改的話咱們這樣就弄好了，因爲個人項目用的springMVC，若是你在web.xml那邊的配置如圖

 

多圖上傳時有可能會碰到彈出框不能顯示的問題
由於彈出框的靜態資源是image.html,這個image.html沒有對應的controller的話，被DispatcherServlet攔截以後，就會找不到controller，而後就會拋出404的錯誤，目前暫時的處理辦法是，修個image.html的後綴爲htm，使其不被攔截。

3.使用

前臺使用

<script type="text/javascript" src="../static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="../static/ueditor/ueditor.all.js"></script>

<input type="hidden" class="span12 required" name="info" id="info" value='${mallProduct.info}' />
<script id="editor" type="text/plain" style="width:96%;height:300px;" class="required"></script>

var ue = UE.getEditor('editor');
ue.ready(function() {
ue.setContent($("#info").val());
}); 

 

 相關的代碼結構以及原理

UEditor的上傳功能是在controller.jsp中實現的

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.baidu.ueditor.ActionEnter" %>
<%@ page trimDirectiveWhitespaces="true" %>
<%

request.setCharacterEncoding( "utf-8" );
response.setHeader("Content-Type" , "text/html");

String rootPath = application.getRealPath( "/" );

out.write( new ActionEnter( request, rootPath ).exec() );

%>

 

入口在ueditor.config.js中。
=========================================================================

完美的分割線

若是你以爲用controller.jsp做爲上傳服務不妥的話，咱們也能夠修改將上傳代碼放入Controller中
代碼以下：

package com.lyz.controller;

import com.baidu.ueditor.ActionEnter;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;

/**
* Created by xiangwei on 2017/7/16.
*/
@Controller
@RequestMapping("/ueditor")
public class UeditorController {
private Logger logger= LoggerFactory.getLogger(UeditorController.class);
@RequestMapping(value = "/dispatch")
public void config(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("application/json");
String rootPath = request.getSession().getServletContext().getRealPath("/");
response.setHeader("Content-Type" , "text/html");
try {
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
logger.error("圖片上傳失敗!");
e.printStackTrace();
}


}

}

 

而後修改ueditor.config.js文件中的

再修改ConfigManager類的getConfigPath()方法，將路徑指定到config.json的路徑。

如：

 

private String getConfigPath () {
//    return this.parentPath + File.separator + ConfigManager.configFileName;
return this.rootPath+File.separator+"static/ueditor/"+"jsp"+File.separator+ConfigManager.configFileName;
}