ckeditor中“浏览服务器”的后台操作

此博文，基于CKeditor 4.5.6版本测试通过。

原创博文，转载请注明出处

参考官方文档，以及网络上的一些帖子。经过调试得到正确的期待中的结果。

【网络上的一些所谓的帖子，不知道是故意将上传的代码整点错误其中，还是无疑间遗漏了些什么，总之整个看是完整的程序，经过我的仔细研究和debug，存在很多KENG, 我崇尚分享的理念，既然blog出来，就要认真的对网友有所帮助】

 

这里，简单的贴一下ckeditor的配置：

CKEDITOR.editorConfig = function( config ) {
    config.toolbarGroups = [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
        { name: 'forms', groups: [ 'forms' ] },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'insert', groups: [ 'insert' ] },
        '/',
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'tools', groups: [ 'tools' ] },
        { name: 'others', groups: [ 'others' ] }
    ];

    config.removeButtons = 'Source,Save,NewPage,Scayt, About';
    config.image_previewText=' ';     //预览区域显示内容
    config.filebrowserImageBrowseUrl = '/browse/mgmt?type=image';
    config.filebrowserImageUploadUrl = '/upload/mgmt?type=image';    
};

细心的朋友，可能会发现，这个和我前一篇博文有一点点不同，其实是为了让spring后台程序更加健壮而做了写重构所需的调整。不影响大局。

 

下面贴出后台的完整代码：

package com.tinguish.mueas.infra.upload;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang3.StringUtils;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.tinguish.mueas.constant.FileType;
import com.tinguish.mueas.constant.MueasConstants;

/**
 * 浏览服务器的文件.
 * 目标是做到让用户只能浏览自己曾经上传的问题，不能看别人的文件。 
 * 
 */
@Controller
public class FileBrowerController {
    protected final Logger logger = Logger.getLogger(getClass());
    
    private static final String IMAGE_DIR = MueasConstants.FILE_UPLOAD_DIR + MueasConstants.FILE_UPLOAD_SUB_IMG_DIR;
    
    private static final String FILE_DIR = MueasConstants.FILE_UPLOAD_DIR + MueasConstants.FILE_UPLOAD_SUB_FILE_DIR;
    
    private static final String FLASH_DIR = MueasConstants.FILE_UPLOAD_DIR + MueasConstants.FILE_UPLOAD_SUB_FLASH_DIR;
    
    private static final String VIDEO_DIR = MueasConstants.FILE_UPLOAD_DIR + MueasConstants.FILE_UPLOAD_SUB_VIDEO_DIR;


    @RequestMapping(value = "/browse/mgmt", method = RequestMethod.GET)
    public void processBrower(ModelMap modelMap, HttpServletRequest request,
            HttpServletResponse response) {
        logger.info(System.currentTimeMillis());
        processBrowerPost(modelMap, request, response);
        return;
    }

    @SuppressWarnings("deprecation")
    @RequestMapping(value = "/browse/mgmt", method = RequestMethod.POST)
    public void processBrowerPost(ModelMap modelMap, HttpServletRequest request, HttpServletResponse response) {

        String typeStr = request.getParameter("type");
        String floderName = request.getParameter("folder");
        
        if (logger.isDebugEnabled()) {
            logger.debug("Browsing files，format: " + typeStr);
        }

        
        String realPath = "";
        if(StringUtils.isNotBlank(floderName)){
            floderName = URLDecoder.decode(floderName);
            // 如果请求中存在文件夹名称，则定位到文件夹中
            realPath = request.getSession().getServletContext().getRealPath(floderName);
            if(logger.isInfoEnabled()){
                logger.info("Requested folder:" + realPath);
            }
        }else if(StringUtils.equalsIgnoreCase(typeStr, FileType.IMAGE.name())){
            // 如果请求中不存在文件夹名称，则使用默认的文件夹
            realPath = request.getSession().getServletContext().getRealPath(MueasConstants.APP_RUNNING_FILES_DIR + IMAGE_DIR);
            if(logger.isInfoEnabled()){
                logger.info("Default folder:" + realPath);
            }
        }
        
        File folder = new File(realPath);
        if(!folder.exists()){
            return;
        }
        
        // 存储子目录 
        List<String> subFolderSet = new ArrayList<String>();
        // 存储文件夹
        List<String> subFileerSet = new ArrayList<String>();
        
        File[] subFiles = folder.listFiles();
        if(null != subFiles && 0 < subFiles.length){
            for(int i=0;i < subFiles.length; i++){
                File _file = subFiles[i];
                if(_file.isDirectory()){
                    subFolderSet.add(getDefaultFolderFromMueasRunningData(_file));
                } else {
                    subFileerSet.add(getFileName(_file.getName()));
                }
            }
        }
        
        String callback = request.getParameter("CKEditorFuncNum");
        PrintWriter out;
        
        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8");
        String outs = "<!DOCTYPE html>"
                      + "<html>"
                      + "<head>"
                      + "<title>服务器文件</title>"
                      + "</head>"
                      + "<body>";
        try {
            out = response.getWriter();
            
            outs += "<style type='text/css'>"
                    + "li:hover{"
                    + "    color: #34ac83;"
                    + "    font-size: 19px;"
                    + " cursor: pointer;"
                    + "}"
                    + "</style>";
            
            outs += "<script type='text/javascript'>";
            
            // 定义点击选择js
            String choose = "function choose(obj){" 
                            + "window.opener.CKEDITOR.tools.callFunction(" + callback    + ", obj);" 
                            + "window.close();" 
                            +"}";
            outs += choose;
            //logger.info(choose);
            
            // 定义文件夹点击响应js
            String view = "function view(obj){"
                          + "window.location.href='/browse/mgmt?type=image&CKEditorFuncNum=" + callback + "&folder=' + obj;"
                          +"}";
            //logger.info(view);
            outs += view;        
            outs +="</script>";
            
            // 这里显示一个返回顶级目录，也就是返回mueas-running-data目录
            String div1 = "<div style='width:100%;float:left;word-break:break-all;' "
                    + "onclick =view('" + URLEncoder.encode(MueasConstants.APP_RUNNING_FILES_DIR + MueasConstants.FILE_UPLOAD_DIR) + "')>"
                    + "<li>根级目录</li>"
                    + "</div>";
            //logger.info(div1);
            outs += div1;
            
            // 如果是子文件夹，显示上级目录链接
            if(StringUtils.isNotBlank(floderName) && !checkIsRoot(folder)){
                String parent = getDefaultFolderFromMueasRunningData(folder.getParentFile());
                String div2 = "<div style='width:100%;float:left;word-break:break-all;' onclick =view('" + URLEncoder.encode(parent) + "')>"
                        + "<li>上级目录: "+parent+"</li>"
                        + "</div>";    
                //logger.info(div2);
                outs += div2;
                if(logger.isDebugEnabled()){
                    logger.debug("Parent folder exists: " + parent);
                }
            }
            
            // 如果是文件夹，则显示文件夹并且可以再次触发下级和上级目录
            if(0 < subFolderSet.size()){
                Iterator<String> subFolderSetIndex = subFolderSet.iterator();
                while(subFolderSetIndex.hasNext()){
                    String ftemp = subFolderSetIndex.next();
                    // 这里url传递的时候，需要转义
                    String div3 = "<div style='width:100%;float:left;word-break:break-all;' onclick =view('" + URLEncoder.encode(ftemp) + "')>"
                            + "<li>下级目录: "+ftemp+"</li>"
                            + "</div>";
                    //logger.info(div3);
                    outs += div3;
                    
                    if(logger.isDebugEnabled()){
                        logger.debug("Adding sub folder： "+ftemp);
                    }
                }
            }
            
            // 如果是文件，则点击就选择文件到控件中
            if(0 < subFileerSet.size()){
                Iterator<String> subFileerSetIndex = subFileerSet.iterator();
                while(subFileerSetIndex.hasNext()){
                    String ftemp = subFileerSetIndex.next();
                    String f = getDefaultFolderFromMueasRunningData(folder);
                    String fileUrl = f + File.separator + ftemp;
                    fileUrl = StringUtils.replace(fileUrl, "//", "/");
                    String div4 = "<div style='width:150px;height:150px;float:left;word-break:break-all;padding:5px;background:#666699;margin:5px;'>"
                            + "<a href='javascript:void(0)' onclick=choose('"+fileUrl+"')>"
                            + "<img style='border:none;width:145px;height:145px;' src='"+fileUrl+"' title='"+fileUrl+"'/>"
                            + "</a>"
                            + "</div>";    
                    //logger.info(div4);
                    outs += div4;
                    
                    if(logger.isDebugEnabled()){
                        logger.debug("Adding file： " + fileUrl);
                    }
                }
            }    
            outs += "</body></html>";
            logger.info(outs);
            out.println(outs);
            out.flush();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    /**
     * 从/mueas-running-data这一级开始获取文件夹路径
     * @return
     */
    private static String getDefaultFolderFromMueasRunningData(File folder){
        String path = folder.getPath();
        path = path.substring(path.indexOf(MueasConstants.APP_RUNNING_FILES_DIR));
        return path;
    }
    
    /**
     * 判断是否是根目录
     * @param floderName
     * @return
     */
    private static boolean checkIsRoot(File folder){
        String name = getFileName(folder.getName());
        return StringUtils.equalsIgnoreCase("/" + name, MueasConstants.FILE_UPLOAD_DIR);
    }
    
    /**
     * 获取输入文件路径或者目录路径中最后一级的名字，即可能是一个文件名，也可能是一个子目录的名字
     * 
     * @param file
     * @return
     */
    private static String getFileName(String file){
        String temp = new String(file);
        temp = temp.replace("//", "/");
        String items[] = file.split("/");
        if(items.length > 0){
            return items[items.length - 1];
        }else{
            return null;
        }
    }
}

这其中，需要细心的是动态创建的html文件，我在这里遇到了些小问题，主要是字符串拼接时格式的问题。这些，通过打印日志，还是比较容易看出来的！

 

最后，上一下测试效果图片：

点击上面鼠标所在位置的子目录后，得到下面的图片：

欢迎拍砖。