富文本编辑器--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

Fckeditor

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