CKEditor 配置使用,及图片黏贴上传功能

1、在下载ckeditor包

https://ckeditor.com/ckeditor-4/download/

2、引用ckeditor的js文件

<script src="../../../static/js/ckeditor/ckeditor.js"></script>

<textarea name="content" id="editor">  &lt;p&gt;This is some sample content.&lt;/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;

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom阅读 7,593评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,369评论 19 139
  • Address:https://www.zybuluo.com/XiangZhou/note/208532 Exp...
    天蠍蒗漫阅读 13,900评论 2 55
  • 去年冬天,妈妈带我去摘草莓,刚一下车,一片白色的大棚映入眼帘,在哪白色的大棚下有红色绿色掺杂着的一片,那是草莓和它...
    臻臻1012阅读 1,371评论 0 1
  • 一個人拥有此生此世是不够的,他還應該擁有不斷增上增善的世界。 一個人的一生當中,什麽都可以放棄,但絕對不可以放棄,...
    觉之灯阅读 1,066评论 0 0