wangEditor富文本编辑器使用及图片上传

<script type="text/javascript" src="style/js/wangEditor.min.js"></script>

<div id="editor">
</div>

创建富文本编辑器

var E = window.wangEditor;
var editor = new E('#editor');
editor.customConfig.uploadImgServer = '<%=path%>/Img/upload'; //上传URL
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
editor.customConfig.uploadImgMaxLength = 5;    
editor.customConfig.uploadFileName = 'myFileName';
editor.customConfig.uploadImgHooks = {
    customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
                // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
         
                // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
                var url =result.data;
                insertImg(url);
         
                // result 必须是一个 JSON 格式字符串!!!否则报错
            }
        }
        editor.create();

后台代码 smm框架

public class ImgController {
    @Autowired 
    private HttpServletRequest request; 
    @RequestMapping(value ="/upload",method=RequestMethod.POST)
    @ResponseBody
    public Object UpLoadImg(@RequestParam(value="myFileName")MultipartFile mf) {
        String realPath = request.getSession().getServletContext().getRealPath("upload");
         
    //获取源文件
    String filename = mf.getOriginalFilename();
    String[] names=filename.split("\\.");//
    String tempNum=(int)(Math.random()*100000)+"";
    String uploadFileName=tempNum +System.currentTimeMillis()+"."+names[names.length-1];
    File targetFile = new File (realPath,uploadFileName);//目标文件
     
    //开始从源文件拷贝到目标文件
     
    //传图片一步到位
    try {
        mf.transferTo(targetFile);
    } catch (IllegalStateException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
     
    Map<String, String> map = new HashMap<String, String>();
    map.put("data","http://localhost:8080/SSM/upload/"+uploadFileName);//这里应该是项目路径
    return map;//将图片地址返回
    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值