富文本编辑器--FCKEditor 上传图片

 

FCKEditor的最新版本已经更改名称为CKEditor；

1、在页面引入fckeditor目录下的fckeditor.js

<script type="text/javascript" src="./fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="./common/js/jquery.js"></script>

2、JSP的文件

<script type="text/javascript">
    $(function()
    {
        var fck = new FCKeditor("productdesc");  //创建对象（参数为要替代的textarea标签的name或id属性）
        fck.BasePath = "./fckeditor/";   //指定fckeditor的路径最后面，注：必须加'/'
        fck.Height = 400 ;
　　　　 fck.Config["ImageUploadURL"] = "/upload/uploadFck.do"; //上传图片的Controller的URL
        fck.ReplaceTextarea();  //创建编辑器
    });    
</script>   


<div>
    <textarea rows="20" cols="180" id="productdesc" name="description"></textarea>
</div>

3、后台Controller的代码

    //上传Fck的图片
    @RequestMapping(value = "/upload/uploadFck.do")
    @ResponseBody
    public void uploadPics(HttpServletRequest request, HttpServletResponse response) throws Exception
    {
        //FCK的上传没有文件的名字, 只要文件上传到后台, 肯定存在于 HttpServletRequest 中
        //Spring提供了 MutipartRequest 对原生态的 request进行强转; 强转后生成的 MutipartRequest 只有图片的信息
        MultipartRequest multipartRequest = (MultipartRequest) request;
        
        Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
        for(Entry<String, MultipartFile> entry : fileMap.entrySet())
        {
            MultipartFile pic = entry.getValue(); //上传上来的图片
            
            String path = uploadService.uploadPic(pic.getBytes(), pic.getOriginalFilename(), pic.getSize());
            String url = Constants.IMAGE_URL + path; //全路径
            
            //返回全路径给FCK, fck-core.2.6.jar --> java-core.2.6.jar
            UploadResponse uploadResponse = UploadResponse.getOK(url);
            
            response.getWriter().print(uploadResponse);
        }
    }

 

 

参考：http://blog.csdn.net/zhao13083837081/article/details/52846640