1. 程式人生 > >百度富文字編輯器UEditor的改造

百度富文字編輯器UEditor的改造

      在Java專案中,做內容管理功能時,需要用到富文字編輯器,目前流行的富文字編輯器還是比較多的,因為專案中用的是百度的UEditor,所以對UEditor使用中的一些問題做個總結吧。

      因為是Java專案所以使用的是隻能選擇jsp版本的UEditor,使用方式還是比較簡單的,按照UEditor官方的文件來就好了。

     首先說下踩過的坑,我專案一開始是用的war部署的方式,大家都知道war部署時是會解壓到tomcat的webapps目錄的,這樣是可以通過系統地址訪問到這個controller.jsp檔案的(UEditor的前端js中配置的上傳地址就是host:port/controller.jsp?action=upload,需要直接訪問該檔案),但將專案打包成jar包執行後,使用同樣的配置,是無法訪問到該檔案的,因為它是被打包在jar包裡面的,通過host:port/controller.jsp是無法訪問的,因此如果你的專案是jar部署的,這個controller.jsp是必須要幹掉的,不然是無法實現上傳功能的。

      還有一個坑,專案打包方式改成jar包後,將controller.jsp改造後,想著現在應該能上傳了吧,但現實總是很骨感,一直返回配置不正確,經過打斷點跟蹤除錯,發現是初始化配置檔案的時候出錯了,UEditor原始碼目錄有個config.json檔案,一般我們會把config.json檔案放到專案的resources目錄,該檔案存放了各種要上傳的檔案型別的配置,先看下載入該配置檔案的原始碼實現

    private void initEnv () throws FileNotFoundException, IOException {
		
		File file = new File( this.originalPath );
		
		if ( !file.isAbsolute() ) {
			file = new File( file.getAbsolutePath() );
		}
		
		this.parentPath = file.getParent();
		
		String configContent = this.readFile( this.getConfigPath() );
		
		try{
			JSONObject jsonConfig = new JSONObject( configContent );
			this.jsonConfig = jsonConfig;
		} catch ( Exception e ) {
			this.jsonConfig = null;
		}
		
	}
	
	private String getConfigPath () {
        String path = this.getClass().getResource("/").getPath() + ConfigManager.configFileName;
        if (new File(path).exists()) {
          return path;
        }else {          
          return this.parentPath + File.separator + ConfigManager.configFileName;
        }
	}
分析原始碼可以看到,讀取config.json檔案的方式都是通過檔案的操作來完成的,這種方式在war部署時是沒有問題的,因為可以獲取到檔案的絕對路徑,然後讀取檔案,但是通過jar部署,是將檔案打包在jar包的,是不會解壓開來的,因此通過檔案操作的方式是無法讀取到config.json檔案的,所以在載入配置檔案的時候出錯了。

      首先改造的是UEditor中的controller.jsp檔案。先吐槽一下,如果放在幾年前,使用jsp檔案來寫前端還比較流行的時候,引入jsp版的UEditor,不會覺得有什麼不妥,但是在現在前端框架百花齊放的年代,angularJS、React、Vue等等各種前端框架琳琅滿目,基本上已經見不到jsp頁面檔案的影子了,同時前後端程式碼完全分離的程式碼管理模式下,此時引入一個jsp版的UEditor,在Java程式碼的resource目錄下突然多了個jsp檔案,總感覺很膈應,暫不知道為啥UEditor要放個jsp檔案在專案裡。

      吐槽完畢,進入正題。

       先分析下controller.jsp這個檔案的作用,貼上原始碼

<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="com.baidu.ueditor.ActionEnter"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
    request.setCharacterEncoding( "utf-8" );
	response.setHeader("Content-Type" , "text/html");
	
	String rootPath = application.getRealPath( "/" );
	
	out.write( new ActionEnter( request, rootPath ).exec() );
	
%>

程式碼很簡單,就是做了個響應頭的設定,然後將ActionEnter類中的exec方法執行結果返回給瀏覽器。

如果看過ActionEnter類的原始碼就知道,就是做了個檔案上傳功能的事,具體程式碼這裡就不分析了,有興趣的同學可以去看看。

      那麼這個controller.jsp檔案如何整改呢?最簡單的方式就是servlet,瞭解java web基礎的同學都知道,jsp的本質就是個servlet,在web容器中會將jsp轉換成servlet,也就是個java類,這樣就可以將這個看著扎眼的controller.jsp檔案從專案中移除了。因為專案採用的是spring-boot框架,因此改造很簡單,新建個類,加上@WebServlet註解就好了,不要忘了加上servlet的url pattern,然後將controller.jsp的java程式碼放到servlet中,最後將UEditor中的js檔案的上傳地址改成servlet的訪問地址就完成了。

      然後改造config.json檔案的載入程式碼,google的guava包中提供了很多的工具類,其中就有對resource資源操作的類,Resources類中就提供獲取resource目錄檔案內容的方法,直接靜態方法呼叫就好了:

Resources.toString(Resources.getResource(this.configFileName),"utf-8")

    就可以直接獲取到config.json的內容了

     經過測試完美的解決了問題(畢竟google出品)。