1、在下载ckeditor包
https://ckeditor.com/ckeditor-4/download/
2、引用ckeditor的js文件
<script src="../../../static/js/ckeditor/ckeditor.js"></script>
<textarea name="content" id="editor"> <p>This is some sample content.</p> </textarea>
window.onload =function(){CKEDITOR.replace('editor');};
3、引入config.js文件
<script src="../../../static/js/ckeditor/config.js"></script>
在config.js添加config.filebrowserUploadUrl="http://127.0.0.1:8080/llz/test/testPost";
config.filebrowserUploadUrl=""//配置图片上传接口
3、服务器上传接口
//图片黏贴上传接口
@PostMapping("/testPost&responseType=json")
public MaptestPostRes(@RequestParam("upload") MultipartFile file){
System.out.print(file);
if (!file.isEmpty()) {
try {
String relaPath ="static\\upload\\"+new Date().getTime()+"\\";
String path ="E:\\project\\" + relaPath;
File filepath =new File(path);
if (!filepath.exists())
filepath.mkdirs();
// 文件保存路径
String savePath = path + file.getOriginalFilename();
// 转存文件
file.transferTo(new File(savePath));
Map res =new HashMap();
res.put("uploaded",1);
res.put("fileName",file.getOriginalFilename());
res.put("url",savePath);
return res;
}catch (Exception e) {
e.printStackTrace();
}
}
return null;
}
//图片上传接口
@PostMapping("/testPost")
public MaptestPost(@RequestParam("upload") MultipartFile file){
System.out.print(file);
if (!file.isEmpty()) {
try {
String relaPath ="static\\upload\\"+new Date().getTime()+"\\";
String path ="E:\\project\\" + relaPath;
File filepath =new File(path);
if (!filepath.exists())
filepath.mkdirs();
// 文件保存路径
String savePath = path + file.getOriginalFilename();
// 转存文件
file.transferTo(new File(savePath));
Map res =new HashMap();
res.put("uploaded",1);
res.put("fileName",file.getOriginalFilename());
res.put("url",savePath);
return res;
}catch (Exception e) {
e.printStackTrace();
}
}
return null;
}
网友评论