1.下载ckedtior4.9.2,百度云链接: https://pan.baidu.com/s/1A8E8fqE1u8c8gkp6Zl-L8Q 提取码: 7k1i
2.导入到项目中,因为我用的是springboot框架所以放到src/main/resources/static下
3.前台导入ckedtior4.9.2的js
<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="/ckeditor/config.js" type="text/javascript"></script>
4.html代码
<textarea name="content" id="editor"></textarea>
5.js代码(filebrowserImageUploadUrl :"upload?"这个地方有个问号,代表可以粘贴图片上传到服务器)
//初始换编辑器
var editor = CKEDITOR.replace('editor', {
filebrowserImageUploadUrl :"upload?",
removePlugins:'elementspath,resize',
codeSnippet_theme: 'zenburn',
height:'480'
});
到这编辑器基本可以使用了
6.配置config.js
/*将编辑器的语言设置为中文*/
config.language = 'zh-cn';
/*去掉图片预览框的文字*/
config.image_previewText = ' ';
/*开启工具栏“图像”中文件上传功能,后面的url为图片上传要指向的的action或servlet*/
config.filebrowserImageUploadUrl= "upload";
7.后台代码
/** 上传图片方法
* @param request
* @param description
* @param file
* @return
* @throws Exception
*/
@RequestMapping("/upload")
@ResponseBody
public String uploadEditorImage(HttpServletResponse response, HttpServletRequest request,@RequestParam("upload")MultipartFile file) {
JSONObject result = new JSONObject();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
String res = sdf.format(new Date());
//服务器上使用
// String rootPath =request.getServletContext().getRealPath("/resource/uploads/");//target的目录
//本地使用
String rootPath ="E:\\bolg";
//原始名称
String originalFilename = file.getOriginalFilename();
//新的文件名称
String newFileName = res+originalFilename.substring(originalFilename.lastIndexOf("."));
//新文件
File newFile = new File(rootPath+ File.separator+newFileName);
//判断目标文件所在的目录是否存在
if(!newFile.getParentFile().exists()) {
//如果目标文件所在的目录不存在,则创建父目录
newFile.getParentFile().mkdirs();
}
System.out.println(newFile);
//将内存中的数据写入磁盘
try {
file.transferTo(newFile);
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//完整的url
String fileUrl = newFileName;
result.put("uploaded", 1);
result.put("fileName", newFileName);
result.put("url", fileUrl);
return result.toJSONString();
}
将复制的图片粘贴到编辑起内就会上传到服务器