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

宋建 史紀(jì)強(qiáng) 田百仁 王文蔚

[摘? ? 要] 百度UEditor在線編輯器提供圖片、附件的上傳和瀏覽功能。在對(duì)UEditor附件上傳流程分析基礎(chǔ)上，基于UEditor提出了一種網(wǎng)站內(nèi)容附件的組織方式和技術(shù)實(shí)現(xiàn)方法，并實(shí)現(xiàn)對(duì)在線附件刪除功能的擴(kuò)展。

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

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

[中圖分類號(hào)]? TP315? ? [文獻(xiàn)標(biāo)識(shí)碼]? A? ? ? [文章編號(hào)]? 1673 - 0194（2019）17- 0183- 03

0? ? ? 引? ? 言

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

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

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

1? ? ? CMS附件組織方式

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

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

在網(wǎng)站配置中，如tomcat中server.xml可以設(shè)置虛目錄，指向欄目的存儲(chǔ)路徑。

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

2? ? ? UEditor運(yùn)行過程

UEditor主要是前端的JS組件，也提供了后端的程序，以JAVA后臺(tái)程序說(shuō)明其運(yùn)行過程。

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

3? ? ? 附件的管理方法

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

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

/* 上傳文件配置 */

"fileActionName"： "uploadfile"，

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

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

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

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

"fileAllowFiles"： [

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

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

4? ? ? 技術(shù)實(shí)現(xiàn)

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