ckeditor 图片上传填坑记

今天一天的主要做了ckeditor 图片上传,为了防止以后再遇到,记录一下经验

注:使用CKEditor版本为js版本的CKEditor 4.11.2 ,所有配置均参考自CKEditor官方API:https://docs.ckeditor.com/,以及实践经验

一、快速使用
CKEditor官网下载js插件 
进入官网https://ckeditor.com/ckeditor-4/download/点击Release notes选择4.11.2 版本点击Download.Zip下载 

以上为复制内容 我用的最新版本ckeditor_4.11.2 

引入js <script src="/static/js/ckeditor/ckeditor.js"></script>

     使用        <textarea  name="ckeditor" id="ckeditor">
出现问题:

ckeditor 图片上传填坑记

1遇到的主要问题点击ckeditor图片上传 出现一大堆英文字符 缺少上传按钮

js加上

    CKEDITOR.replace('ckeditor',{   
        filebrowserImageUploadUrl : '/console/upload/upload',  //作用 上传图片的action路径
        language : 'zh-cn',  
        image_previewText:' '//作用 去掉英文字符
    });

上传图片action  要返回json数据 并且要包含下面三个参数 

  
            params.put("uploaded", 1);
            params.put("fileName", file.getOriginalFilename());
            params.put("url", "/person/info/showPhotoByPath?path=" + imgUrl);//相对路径 我的这个是为了回显,加的方法action路                //径+url
            String result = JSONArray.toJSONString(params);
            out.println(result);