百度編輯器UEditor前後端分離，後端Java代碼改善

最近項目需要用到百度編輯器UEditor,之前使用Ueditor的時候還是剛工作的時候，那個時候jsp頁面不懂裏面過程，最近項目使用前後端分離使用UEditor記錄下學習的過程，這裏只是後端的代碼

先自行下載官網的源碼，找到裏面jsp文件,裏面的 < config.json > 這個保存好這個是需要給前端初始化用，前端調用接口讀取這個文件裏面的配置來初始化編輯器

 

 我們首先需要創建一個統一接口 來執行初始化編輯器和上傳圖片的功能

/**
 * @author HeWei
 * 百度編輯器
 */
@RestController
@RequestMapping("/ueditor")
public class UeditorController {

    Logger logger = Logger.getLogger("ueditorController");

    @RequestMapping(value = "/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        // 設置返回類型
        response.setContentType("application/json");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            logger.info("百度編輯config異常");
        }
    }
}

在調用步驟是 在執行到

new ActionEnter(request, rootPath).exec(); 的時候進入 ActionEnter類的構造方法中

	public ActionEnter ( HttpServletRequest request, String rootPath) {
		
		this.request = request;
		this.rootPath = rootPath;
		this.actionType = request.getParameter( "action" );
		this.contextPath = request.getContextPath();
		this.configManager = ConfigManager.getInstance( this.rootPath, this.contextPath, request.getRequestURI() );

		
	}

運行getInstance 進入 ConfigManager類的工廠構造器方法

    /**
     * 配置管理器構造工廠
     *
     * @param rootPath    服務器根路徑
     * @param contextPath 服務器所在項目路徑
     * @param uri         當前訪問的uri
     * @return 配置管理器實例或者null
     */
    public static ConfigManager getInstance(String rootPath, String contextPath, String uri) {

        try {
            ConfigManager configManager = new ConfigManager(rootPath, contextPath, uri);
            return configManager;
        } catch (Exception e) {
            return null;
        }

    }

    /*
     * 通過一個給定的路徑構建一個配置管理器， 該管理器要求地址路徑所在目錄下必須存在config.properties文件
     */
    private ConfigManager(String rootPath, String contextPath, String uri) throws FileNotFoundException, IOException {

        rootPath = rootPath.replace("/", "/");

        this.rootPath = rootPath;
        this.contextPath = contextPath;

        if (contextPath.length() > 0) {
            this.originalPath = this.rootPath + uri.substring(contextPath.length());
        } else {
            this.originalPath = this.rootPath + uri;
        }

        this.initEnv();

    }

這個對象我們只要看 initEnv()方法 這個方法主要是獲得config.json的配置信息轉換的json對象數據

    private void initEnv() throws FileNotFoundException, IOException {

        File file = new File(this.originalPath);

        if (!file.isAbsolute()) {
            file = new File(file.getAbsolutePath());
        }

        this.parentPath = file.getParent();

        // 獲取讀取到的屬性 在轉換成json發給前端完成初始化
        String configContent = this.readFile(CONFIG_PATH);

        try {
            JSONObject jsonConfig = JSON.parseObject(configContent);
            this.jsonConfig = jsonConfig;
        } catch (Exception e) {
            this.jsonConfig = null;
        }

    }


     // 這裏主要就是讀取config.json文件裏面的屬性 轉換成字符串
    private String readFile(String path) throws IOException {

        StringBuilder builder = new StringBuilder();
        try {
            BufferedReader bfReader;
            // 判斷 讀取 springboot中resource文件  add by huwei@20190203
            if (StringUtils.isEmpty(path)) {
                InputStream inputStream = this.getClass().getResourceAsStream("/config.json");
                InputStreamReader reader = new InputStreamReader(inputStream);
                bfReader = new BufferedReader(reader);
            } else {
                // 讀取配置的文件
                InputStreamReader reader = new InputStreamReader(new FileInputStream(path), "UTF-8");
                bfReader = new BufferedReader(reader);
            }
            String tmpContent = null;

            while ((tmpContent = bfReader.readLine()) != null) {
                builder.append(tmpContent);
            }

            bfReader.close();

        } catch (UnsupportedEncodingException e) {
            // 忽略
        }

        return this.filter(builder.toString());

    }

執行完以上步驟就完成編輯器的初始化了

編輯器圖片上傳：

    百度編輯器的默認的圖片是存儲的本地。所有我們需要修改源碼裏面的圖片上傳代碼

 在ActionEnter類中的 invoke()方法是根據類型執行響應操作   圖片上傳,視頻上傳,上傳文件 都是一個方法

	case ActionMap.UPLOAD_IMAGE:
			case ActionMap.UPLOAD_SCRAWL:
			case ActionMap.UPLOAD_VIDEO:
			case ActionMap.UPLOAD_FILE:
				conf = this.configManager.getConfig( actionCode );
				state = new Uploader( request, conf ).doExec();
				break;

最終上傳的對象是BinaryUploader類中的save方法

// 將這段自定的上傳圖片代碼  改成 自己項目實現的圖片上傳
			savePath = PathFormat.parse(savePath, originFileName);

			String physicalPath = (String) conf.get("rootPath") + savePath;

			InputStream is = fileStream.openStream();
			State storageState = StorageManager.saveFileByInputStream(is,
					physicalPath, maxSize);
			is.close();

    if (storageState.isSuccess()) {
                storageState.putInfo("url",uploadFile.getUrl() );  //返回給前端的圖片路徑
                storageState.putInfo("type", suffix);
                storageState.putInfo("original", originFileName + suffix);
            }

使用自己的圖片上傳將返回的圖片保存信息  在返回給前端就可以了 。

這樣就完成前後端分離Ueditor了。