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

宋建 史纪强 田百仁 王文蔚

[摘    要] 百度UEditor在线编辑器提供图片、附件的上传和浏览功能。在对UEditor附件上传流程分析基础上，基于UEditor提出了一种网站内容附件的组织方式和技术实现方法，并实现对在线附件删除功能的扩展。

[关键词] CMS网站内容管理系统;在线编辑器;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的开发中可以利用UEditor已有的功能，而不需要再单独开发附件功能;在实际使用中，由于不同文章的上传附件、图片都存储在同一个目录下，而且上传后不能删除附件文件，无法做到授权管理，自主管理。

针对以上问题，基于UEditor，提出一种CMS的附件管理方法，并对UEditor进行功能扩充和完善。

1      CMS附件组织方式

CMS附件组织方式分为2个层次，栏目层和文章层;同一栏目下文章附件组织在栏目下;栏目下，每个文章建立一个独立的目录，用于存放文章的附件和图片，如图1所示。

文章附件的存放应与Web网站目录分离（UEditor附件缺省上传到Web网站目录下），栏目的存储路径可以是专用磁盘目录，也可以是远程的文件服务器，便于附件文件的管理和备份。

在网站配置中，如tomcat中server.xml可以设置虚目录，指向栏目的存储路径。

附件的命名规则：栏目的相对路径/文章id/附件名

2      UEditor运行过程

UEditor主要是前端的JS组件，也提供了后端的程序，以JAVA后台程序说明其运行过程。

UEditor前端向Web服务器发送请求，传递action参数，用于告诉后台请求执行的操作，同时可以附加自定义的参数，如文章所在栏目的id。Ueditor controller.jsp是一个控制器，用于接收处理请求，它实例化一个ActionEnter对象，并调用ActionEnter的exec（）方法;ActionEnter初始化时会读取config.json配置文件，获取附加存储目錄、文件名、文件大小等参数值;exe（）方法会再调用ActionEnter的invoke（）方法，根据action操作，来执行上传附件、图片、涂鸦、文件列表等操作，附件上传操作（action=UPLOADFILE），实例化Uploader对象，运行BinaryUploader或Base64Uploader静态类的save（）方法，以文件流的方式将上传的文件的分片存储到Web服务器上，实现附件的上传，如图2所示。

3      附件的管理方法

要实现上述附件组织方式，并对附件进行管理，关键是将附件上传到指定的存储位置，然后按照附件存储组织规则，进行文章附件的增、删、查操作。

UEditor的Web服务器端程序在接收附件时，会读取配置文件config.json，这个文件中有一系列参数，如 "filePathFormat"，用于设置上传附件的保存路径和文件名。对于本文CMS附件管理方法，参数的值变为动态的，根据栏目和文章动态赋值。如filePathFormat： /{relativeDir}/{time}{rand：4}，{relativeDir}在配置文件读取时，被替换，根据附件组织方式和命名规则，保存到相应的存储目录下。

/* 上传文件配置 */

"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}字符串，后续程序根据这些动态替换后的实际路径，完成附件的上传和列表操作。