ckeditor 4 修改连接功能实现上传附件

ckeditor 4 中的link插件自带有上功能,按照以下步骤简单修改,可以实现文章上传附件的形式供阅读者下载。

1、构建下载功能

        1.1 事先约定下载链接形式如下:

        <a href="fileDownload?path=20240219&name=测试文件.docx">测试文件.docx</a>

        其中,fileDownload是提供下载服务的servlet的URL,携带两个参数,分别是:path是子文件夹目录名,name是要下载的文件名称。

        1.2 事先约定下载的文件路径:web/download/20240219

        (202240219是根据上传文件时间生成的文件夹)

        1.3 编写提供下载服务servlet

public class FileDownloadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 先准备要下载的文件
        //2. 获取到要下载的文件的名字
        request.setCharacterEncoding("utf-8");
        String downLoadFilePath = request.getParameter("path");
        String downLoadFileName = request.getParameter("name");
        //3. 给http响应,设置响应头 Content-Type , 就是文件的MIME
        //   通过servletContext 来获取
        ServletContext servletContext = request.getServletContext();
        String downLoadPath = "/download/"+downLoadFilePath+"/"; 
        //下载目录从 web工程根目录计算 /download/202240219/测试文件.docx
        String downLoadFileFullPath = downLoadPath + downLoadFileName;
        System.out.println("downLoadFileFullPath="+downLoadFileFullPath);
        String mimeType = servletContext.getMimeType(downLoadFileFullPath);
        System.out.println("mimeType= " + mimeType);
        response.setContentType(mimeType);
        //4. 给http响应,设置响应头 Content-Disposition
        //   这里考虑的细节比较多,比如不同的浏览器写法不一样,考虑编码
        if (request.getHeader("User-Agent").contains("Firefox")) {
            // 火狐 Base64编码
            response.setHeader("Content-Disposition", "attachment; filename==?UTF-8?B?" +
                    new BASE64Encoder().encode(downLoadFileName.getBytes("UTF-8")) + "?=");
        } else {
            // 其他(主流ie/chrome)使用URL编码操作
            response.setHeader("Content-Disposition", "attachment; filename=" +
                    URLEncoder.encode(downLoadFileName, "UTF-8"));
        }
        //5. 读取下载的文件数据,返回给客户端/浏览器
        //(1) 创建一个和要下载的文件,关联的输入流
        InputStream resourceAsStream =
                servletContext.getResourceAsStream(downLoadFileFullPath);
        //(2) 得到返回数据的输出流 
        ServletOutputStream outputStream = response.getOutputStream();
        //(3) 使用工具类,将输入流关联的文件,对拷到输出流,并返回给客户端/浏览器
        IOUtils.copy(resourceAsStream, outputStream);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

2、修改link插件

        2.1 找到ckeditor/plugins/link/dialogs/link.js,并格式化下代码(eclipse格式化不了可以考到idea)

        2.2 修改upload下面的hidden属性,hidden:!0->hidden:0,将上传窗口标签显示,如果修改后没有显示,可换个浏览器测试,不要在一个浏览器上死扣,浪费时间。

 

        2.3 修改以下代码,让超链接展示页面符合上面下载servlet的格式要求

3、修改配置,在config.js增加以下配置语句,指定处理上传文件服务的servlet的url是fileUpload,

config.filebrowserUploadUrl = "fileUpload";

4、构建上传文件的servlet

public class FileUploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            response.setContentType("text/html;charset=UTF-8");
            request.setCharacterEncoding("UTF-8");
            response.setCharacterEncoding("UTF-8");
            PrintWriter out=response.getWriter();
            FileItemFactory factory=new DiskFileItemFactory();
            ServletFileUpload upload=new ServletFileUpload(factory);
            try {
                List<FileItem> list=upload.parseRequest(request);
                for(FileItem fileItem:list){
                    //构建上传文件路径
                    String fileName=DateUtil.getCurrentDateStr();//工具类DateUtil
                    File fileRealPathDirectory = new File(PropertiesUtil.getValue("filePath")+fileName.substring(0,8));//工具类PropertiesUtil
                    if (!fileRealPathDirectory.exists()) {//不存在,就创建
                        fileRealPathDirectory.mkdirs();//创建
                    }
                    //构建文件磁盘路径+文件名
                    File file=new File(PropertiesUtil.getValue("filePath")+fileName.substring(0,8)+"/"+fileItem.getName());
                    //构建回传字符串
                    String newPath=fileName.substring(0,8)+"&name="+fileItem.getName();
                    fileItem.write(file);
                    String callback = request.getParameter("CKEditorFuncNum");
                    out.println("<script type=\"text/javascript\">");
                    out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + newPath + "',''" + ")");
                    out.println("</script>");
                    out.flush();
                }
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

5、配置文件 增加上面servlet用到的文件存放路径参数,需要与上面下载servlet设计一致,否则上传之后无法下载。

filePath=D:\\workspace\\nbxxfb\\WebContent\\download\\

6、测试

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值