ckeditor 图片上传填坑记

6 篇文章 0 订阅
2 篇文章 0 订阅

今天一天的主要做了ckeditor 图片上传,为了防止以后再遇到,记录一下经验

注:使用CKEditor版本为js版本的CKEditor 4.11.2 ,所有配置均参考自CKEditor官方API:https://docs.ckeditor.com/,以及实践经验

一、快速使用
CKEditor官网下载js插件 
进入官网https://ckeditor.com/ckeditor-4/download/点击Release notes选择4.11.2 版本点击Download.Zip下载 

以上为复制内容 我用的最新版本ckeditor_4.11.2 

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

     使用        <textarea  name="ckeditor" id="ckeditor">
出现问题:

1遇到的主要问题点击ckeditor图片上传 出现一大堆英文字符 缺少上传按钮

js加上

    CKEDITOR.replace('ckeditor',{   
        filebrowserImageUploadUrl : '/console/upload/upload',  //作用 上传图片的action路径
        language : 'zh-cn',  
        image_previewText:' '//作用 去掉英文字符
    });

上传图片action  要返回json数据 并且要包含下面三个参数 

  
            params.put("uploaded", 1);
            params.put("fileName", file.getOriginalFilename());
            params.put("url", "/person/info/showPhotoByPath?path=" + imgUrl);//相对路径 我的这个是为了回显,加的方法action路                //径+url
            String result = JSONArray.toJSONString(params);
            out.println(result);

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值