ckeditor上传图片的注意点

时间:2022-06-05 19:22:28

1、要在 ckeditor的  config.js 文件中加上

CKEDITOR.editorConfig = function( config ) {

config.filebrowserImageUploadUrl = 'ckEditImageUpload';//上传图片的接口
};

2、实现上传接口

@RequestMapping(value = "ckEditImageUpload", method = RequestMethod.POST)
    @ResponseBody
    public String ckEditImageUpload(MultipartHttpServletRequest request,HttpServletResponse response) throws BaseException
    {
        String fullPath = null;
        String callback = request.getParameter("CKEditorFuncNum");
        MultipartFile file = request.getFile("upload");
        fullPath = uploadService.getFileUrl(file);
        response.setContentType("text/html;charset=UTF-8");
        response.setHeader("X-Frame-Options", "SAMEORIGIN");
        return "<script type='text/javascript'>"
        + "window.parent.CKEDITOR.tools.callFunction(" + callback
        + ",'" + fullPath + "',''" + ")"+"</script>";
    }

另在页面中插入ckeditor:

引入js   <script type="text/javascript" src="${rootURL}resources/ckeditor/ckeditor.js"></script>

替换

<td colspan="3">

<textarea name="content" id="content" rows="10" cols="40">${banner.content}</textarea>
                <script>
                    // Replace the <textarea id="editor1"> with a CKEditor
                    // instance, using default configuration.
                    CKEDITOR.replace('content');
                </script>
                </td>