jFinal+ ckeditor4.8 图片上传

1、前端页面引入 ckeditor4.8 (官网下载)

<textarea rows="10" name="*ckeditor_textarea*" id="texta"></textarea>
<script type="text/javascript">CKEDITOR.replace("*ckeditor_textarea*");</script>

textarea 的 name 与 script中 的 replace 内 保持一致(ckeditor教程有写)

2、修改ckeditor/congif.js文件配置

CKEDITOR.editorConfig = function( config ) {
 config.image_previewText=' '; //预览区域显示内容
 config.filebrowserImageUploadUrl = "/addPromoteImg?type=Image"; //图片上传的 controller(action)
};

3、配置contorller中方法

public void addPromoteImg(){
        String path = PathKit.getWebRootPath().replace("\\", "/");
        path = path.substring(0,path.indexOf("webapps")+8)+"promoteImg/";// promoteImg 为自定义的保存图片路径
        UploadFile file = getFile("upload",path,5* 1024 * 1024,"UTF-8");
        String imgurl="";
        Long fileName = System.currentTimeMillis();
        if(null!=file){
            String sufName = file.getFileName().substring(file.getFileName().lastIndexOf("."),file.getFileName().length());
            String imgPath = path+File.separator+fileName+sufName;
            File dest = new File(imgPath);
            imgurl="/promoteImg/"+fileName+sufName;
            file.getFile().renameTo(dest);

            String callback =getPara("CKEditorFuncNum"); 

            PrintWriter writer = null;
            try {
                HttpServletResponse response = getResponse();
                writer = response.getWriter();
                writer.write("<script type=\"text/JavaScript\">"
                        +"window.parent.CKEDITOR.tools.callFunction("+ callback + ",'" +ADDRESS+ fileName + sufName+"','')"
                        +"</script>");
                writer.flush();
            } catch (IOException e) {
                throw new RenderException(e);
            }
            finally {
                if (writer != null)
                    writer.close();
            }
        }
        renderNull();
    }

jFinal+ ckeditor4.8 图片上传_第1张图片
jFinal+ ckeditor4.8 图片上传_第2张图片
jFinal+ ckeditor4.8 图片上传_第3张图片

你可能感兴趣的:(ckeditor,jFinal)