CKediter

摘要:
0,更改为隐藏:false 2。实现服务器上传功能的具体步骤是:首先,创建一个新的上传接收文件,接受并保存上传的文件,然后将文件路径反馈给编辑器。查找ckeditor_4.5.10_Fullckeditorconfig.js添加配置。filebrowserImageUploadUrl=“要上载的操作或servlet”。editorConfig=函数{}方法;在服务器上实现图像上载功能/**上载图像*/@RequestMappingpublicvoiduploadPichrowsIllegalStateException,IOException{DiskFileItemFactoryfactory=newDiskFileItemFactory();ServletFileUploader=newServletFileUpload;uploader.setHeaderEncoding;PrintWriterout=response.getWriter();StringCKEditorFuncNum=“1”;FileItemfile=null;if(!

第一步:下载最新版CKeditor

CKediter第1张

第二步:解压并加入到项目中

CKediter第2张

第三步:添加到要使用到CKeditor的JSP页面

  1、在头部引入相应的JS

CKediter第3张

  2、在需要将textarea变成文本编辑器的地方添加JS

CKediter第4张

第四步:刷新页面展示

CKediter第5张

第五步:图片上传

  1、显示图片上传TAB页

  找到ckeditor_4.5.10_fullckeditorpluginsimagedialogsimage.js文件,搜索id:"Upload"

  CKediter第6张

  将hidden:!0,修改成hidden:false

  CKediter第7张

  2、实现服务端上传功能

  具体步骤是,首先创建一个新的上传接收文件,接受并保存上传的文件,然后将文件的路径反馈给编辑器。

  找到ckeditor_4.5.10_fullckeditorconfig.js

  在CKEDITOR.editorConfig = function( config ) {}方法里添加config.filebrowserImageUploadUrl= "要上传的action或servlet";

  在服务端实现图片上传功能

   /*
      *  上传图片
      */
    @RequestMapping("uploadPic")
    public void uploadPic(HttpServletRequest request, HttpServletResponse response, HttpSession session)
            throws IllegalStateException, IOException{
        DiskFileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload uploader = new ServletFileUpload(factory);
        uploader.setHeaderEncoding("UTF-8");
        PrintWriter out =response.getWriter();
        String CKEditorFuncNum = "1";
        FileItem file = null;
        
        if (!Check.isNullObj(request.getParameter("CKEditorFuncNum"))) {
            CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
        }
        
        List<FileItem> list;
        try {
            list = uploader.parseRequest(request);
            
            for (FileItem item : list) {
                if (!item.isFormField()) {
                    if (item.getName() != null && !"".equals(item.getName())) {
                        file = item;
                }
            }
                
            String path = session.getServletContext().getRealPath("/") + "/upload";
            String fileDir = "img";
            String filepath = path + "/" + fileDir + "/";
            
            String fileName=file.getName();
             String uploadContentType =file.getContentType();
             String expandedName ="";
             if (uploadContentType.equals("image/pjpeg")  
                     || uploadContentType.equals("image/jpeg")) {  
                 // IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg  
                 expandedName = ".jpg";  
             } else if (uploadContentType.equals("image/png")  
                     || uploadContentType.equals("image/x-png")) {  
                 // IE6上传的png图片的headimageContentType是"image/x-png"  
                 expandedName = ".png";  
             } else if (uploadContentType.equals("image/gif")) {  
                 expandedName = ".gif";  
             } else if (uploadContentType.equals("image/bmp")) {  
                 expandedName = ".bmp";  
             } else {  
                 out.println("<script type="text/javascript">");  
                 out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum  
                         + ",''," + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");  
                 out.println("</script>");  
                 return ;  
             }  
             if (file.getSize()> 600 * 1024) {  
                 out.println("<script type="text/javascript">");  
                 out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum  
                         + ",''," + "'文件大小不得大于600k');");  
                 out.println("</script>");  
                 return ;  
             }
             DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
             fileName = df.format(new Date())+expandedName;
             file.write(new File(filepath,fileName));
            
             // 返回"图像"选项卡并显示图片  request.getContextPath()为web项目名   
             out.println("<script type="text/javascript">");  
             out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum  
                     + ",'" + "upload/img/" + fileName + "','')");  
             out.println("</script>");  
            }
            
        } catch (FileUploadException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } 

        return ;  
    }

  需要注意的是:

  1)CKEditorFuncNum参数

  CKediter第8张

  这是通过chrome浏览器看到上传的路径

  /uploadPic是我上次图片文件的路径

   ?后面是CKeditor自动添加的参数

  CKEditorFuncNum参数是编辑器接收文件上传后提示方法(CKEDITOR.tools.callFunction(fnID, 'FileUrl', 'Message');</script>)的重要参数,是实际方法的编号

  不同浏览器的参数值也不同,通过浏览器的调试工具发现,FF浏览器它的值是2,其他的浏览器是1,通过这个可以得出结论是,通过它来告知CKeditor来调用哪个方法接受上传反馈信息。这个值,可以通过我们自己的程序去获得。但是更好的方式是CKeditor给我们提供的值。

  CKEditorFuncNum=request("CKEditorFuncNum")

  2)缺少图像源文件地址

  上传完图片后,点击确定后,有可能出现CKediter第9张

  这是因为CKEditor并不知道图片放在哪里,所以无法显示在“预览”中。

  在上传完文件后的返回心中一定要加上

  // 返回"图像"选项卡并显示图片  request.getContextPath()为web项目名   
             out.println("<script type="text/javascript">");  
             out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum  
                     + ",'" + "upload/img/" + fileName + "','')");  
             out.println("</script>");    

  这是提示编辑器调用对应方法。

  3)去除图像信息里的一串描述

  最初打开上传图片的按钮,图像信息TAB页里会显示一串描述信息

  CKediter第10张

  我们只需要找到ckeditor_4.5.10_fullckeditorpluginsimagedialogsimage.js文件,搜索id:"Lorem ipsum dolor"

CKediter第11张

  找到后将双引号里的描述信息删除

  或者

  找到ckeditor_4.5.10_fullckeditorconfig.js

  在CKEDITOR.editorConfig = function( config ) {}方法里添加config.image_previewText=' '; //预览区域显示内容

  4)文件上传

  图片上传也好,文件上传也好,上传路径都在config.js里配置

  //设置文件上传文件地址
  editorObj.config.filebrowserUploadUrl = "" ;
  //设置图片文件上传地址
  editorObj.config.filebrowserImageUploadUrl = "";
  //设置flash文件上传地址
  editorObj.config.filebrowserFlashUploadUrl = "";

免责声明:文章转载自《CKediter》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇AFNetworking application/x-www-form-urlencoded 数据请求方式LAMP简介下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

SpringCloud 分布式配置中心

SpringCloud 分布式配置中心 服务端 创建工程并完善结构 国际惯例,把maven工程创建完善 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww...

从word中复制内容包含图片到fckeditor编辑器中

如何做到 ueditor批量上传word图片? 1、前端引用代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht...

Java操作FTP,从FTP上读取指定文件,把指定文件上传到FTP

需要添加的依赖 <!-- https://mvnrepository.com/artifact/commons-net/commons-net --> <dependency> <groupId>commons-net</groupId>...

Mongodb 笔记采坑

1 比较 数字大小用的是字符串的话,需要也转为 字符串 2 所有的类型 Type Number Alias Notes Double 1 “double” String 2 “string” Object 3 “object” Array 4 “array” Binary data 5 “binData” Unde...

上传大文件的解决方案

需求: 项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在20G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以20G来进行限制。 PC端全平台支持,要求支持Windows,Mac,Linux 支持所有浏览器。 支持文件批量上传 支持文件夹上传,且要求在服务端保留层级结构。文件夹数量要求支持到10W。 支持大文件断点续传,要求...

RabbitMQ内存爆出问题解决思路

http://www.bubuko.com/infodetail-2121050.html RabbitMQ升级到3.6.1版本后,随着业务和系统功能的增加,出现RabbitMQ内存陡增直至服务宕掉的情况。内存增加时,在management管理控制台上可以见到如下警告: The management statistics database currentl...