美文网首页
CKEditor 配置使用,及图片黏贴上传功能

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

作者: 小小_绿 | 来源:发表于2018-10-26 17:15 被阅读0次

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;

}

相关文章

网友评论

      本文标题:CKEditor 配置使用,及图片黏贴上传功能

      本文链接:https://www.haomeiwen.com/subject/qhrltqtx.html