一種基于UEditor的CMS附件管理方法

宋建 史紀強 田百仁 王文蔚

[摘? ? 要] 百度UEditor在線編輯器提供圖片、附件的上傳和瀏覽功能。在對UEditor附件上傳流程分析基礎上，基于UEditor提出了一種網站內容附件的組織方式和技術實現方法，并實現對在線附件刪除功能的擴展。

[關鍵詞] CMS網站內容管理系統(tǒng);在線編輯器;UEditor;附件

doi ： 10 . 3969 / j . issn . 1673 - 0194 . 2019. 17. 071

[中圖分類號]? TP315? ? [文獻標識碼]? A? ? ? [文章編號]? 1673 - 0194（2019）17- 0183- 03

0? ? ? 引? ? 言

在線編輯器是CMS中必備的功能。UEditor是百度Web前端所見即所得富文本Web編輯器，涵蓋流行富文本編輯器特色功能，其輕量、可定制、開源，是使用非常廣的在線編輯器。

UEditor提供了文件、圖片的上傳、瀏覽功能，CMS的開發(fā)中可以利用UEditor已有的功能，而不需要再單獨開發(fā)附件功能;在實際使用中，由于不同文章的上傳附件、圖片都存儲在同一個目錄下，而且上傳后不能刪除附件文件，無法做到授權管理，自主管理。

針對以上問題，基于UEditor，提出一種CMS的附件管理方法，并對UEditor進行功能擴充和完善。

1? ? ? CMS附件組織方式

CMS附件組織方式分為2個層次，欄目層和文章層;同一欄目下文章附件組織在欄目下;欄目下，每個文章建立一個獨立的目錄，用于存放文章的附件和圖片，如圖1所示。

文章附件的存放應與Web網站目錄分離（UEditor附件缺省上傳到Web網站目錄下），欄目的存儲路徑可以是專用磁盤目錄，也可以是遠程的文件服務器，便于附件文件的管理和備份。

在網站配置中，如tomcat中server.xml可以設置虛目錄，指向欄目的存儲路徑。

附件的命名規(guī)則：欄目的相對路徑/文章id/附件名

2? ? ? UEditor運行過程

UEditor主要是前端的JS組件，也提供了后端的程序，以JAVA后臺程序說明其運行過程。

UEditor前端向Web服務器發(fā)送請求，傳遞action參數，用于告訴后臺請求執(zhí)行的操作，同時可以附加自定義的參數，如文章所在欄目的id。Ueditor controller.jsp是一個控制器，用于接收處理請求，它實例化一個ActionEnter對象，并調用ActionEnter的exec（）方法;ActionEnter初始化時會讀取config.json配置文件，獲取附加存儲目錄、文件名、文件大小等參數值;exe（）方法會再調用ActionEnter的invoke（）方法，根據action操作，來執(zhí)行上傳附件、圖片、涂鴉、文件列表等操作，附件上傳操作（action=UPLOADFILE），實例化Uploader對象，運行BinaryUploader或Base64Uploader靜態(tài)類的save（）方法，以文件流的方式將上傳的文件的分片存儲到Web服務器上，實現附件的上傳，如圖2所示。

3? ? ? 附件的管理方法

要實現上述附件組織方式，并對附件進行管理，關鍵是將附件上傳到指定的存儲位置，然后按照附件存儲組織規(guī)則，進行文章附件的增、刪、查操作。

UEditor的Web服務器端程序在接收附件時，會讀取配置文件config.json，這個文件中有一系列參數，如 "filePathFormat"，用于設置上傳附件的保存路徑和文件名。對于本文CMS附件管理方法，參數的值變?yōu)閯討B(tài)的，根據欄目和文章動態(tài)賦值。如filePathFormat： /{relativeDir}/{time}{rand：4}，{relativeDir}在配置文件讀取時，被替換，根據附件組織方式和命名規(guī)則，保存到相應的存儲目錄下。

/* 上傳文件配置 */

"fileActionName"： "uploadfile"，

"fileFieldName"： "upfile"， /* 提交的文件表單名稱 */

"filePathFormat"： "/{relativeDir}/{time}{rand：4}"， /*上傳保存路徑，可以自定義保存路徑和文件名格式*/

"fileUrlPrefix"： "{contextPath}"， /* 文件訪問路徑前綴 */

"fileMaxSize"： 51200000，/* 上傳大小限制，單位B，默認50MB */

"fileAllowFiles"： [

".png"， ".jpg"， ".jpeg"， ".gif"， ".bmp"，

".flv"， ".swf"， ".mkv"， ".avi"， ".rm"， ".rmvb"， ".mpeg"， ".mpg"? ? ]，

4? ? ? 技術實現

在ActionEnter.java類中（或者新建ActionEnter.java子類），增加public ActionEnter （ HttpServletRequest request， Map cmsconf）構造方法;CMS的文章相對目錄、欄目訪問路徑、欄目存儲路徑形成map參數，作為構造函數的參數cmsconf，傳入欄目附件的實際存儲路徑。ActionEnter初始化時，讀取配置文件config.json，替換{relativeDir}、{categoryDir}、{categoryVPath}字符串，后續(xù)程序根據這些動態(tài)替換后的實際路徑，完成附件的上傳和列表操作。