zoukankan      html  css  js  c++  java
  • ckeditor4.7配置图片上传

    ckeditor作为老牌的优秀在线编辑器,一直受到开发者的青睐。

    这里我们讲解下 ckeditor最新版本4.7的图片上传配置。

    https://ckeditor.com/ 官方

    进入下载 https://ckeditor.com/download

    QQ鎴�浘20170820202125.jpg

    我们下载完整版

    默认本地上传没有开启;

    找到ckeditor/plugins/image/dialogs/image.js文件 打开 

    然后搜索 id:"Upload",hidden   默认值是!0 我们改成0即可

    刷新页面,点击那个上传图片图标,

    QQ鎴�浘20170820202625.jpg

    出现了上传;

    然后我们配置下上传后台请求路径

    找到ckeditor下的config.js 打开

    config.filebrowserUploadUrl="/admin/film/ckeditorUpload";

    配置下  

    后台处理有个callback参数CKEditorFuncNum我们要接收下 并且要返回

    这里我下我项目里的参考实现 用的是springboot

    /**
     * 上传图片
     * @param file
     * @return
     */
    @ResponseBody
    @RequestMapping("/ckeditorUpload")
    public String ckeditorUpload(@RequestParam("upload")MultipartFile file,String CKEditorFuncNum)throws Exception{
    	// 获取文件名
    	String fileName = file.getOriginalFilename();
    	// 获取文件的后缀名
    	String suffixName = fileName.substring(fileName.lastIndexOf("."));
    	String newFileName=DateUtil.getCurrentDateStr()+suffixName;
    	FileUtils.copyInputStreamToFile(file.getInputStream(), new File(imageFilePath+newFileName));
    	
    	StringBuffer sb=new StringBuffer();
    	sb.append("<script type="text/javascript">");
    	sb.append("window.parent.CKEDITOR.tools.callFunction("+ CKEditorFuncNum + ",'" +"/static/filmImage/"+ newFileName + "','')");
    	sb.append("</script>");
    	
    	return sb.toString();
    }

    获取文件,重命名,搞到本地 然后返回ajax信息。

    转载:http://blog.java1234.com/blog/articles/339.html

  • 相关阅读:
    day09
    day8
    day 7
    day 6
    PYTHON 学习
    day 5 作业
    day04作业
    Day03作业及默写
    python 2020 day4
    (copy)python操作excel
  • 原文地址:https://www.cnblogs.com/share-record/p/11291645.html
Copyright © 2011-2022 走看看