百度富文本編輯器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出品)。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章