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>