富文本编辑器只能以base64方式上传的问题,附异步上传优化源码

分享 未结 3 1905
戰士小豬
戰士小豬 VIP2 2018-12-15 13:35:41
收藏
summernote是一款富文本编辑器,但是他上传的图片的时候,图片会以二进制的形式存入数据库字段中,这时候就很占资源,所以我们希望图片能存入自己的服务器,在字段中就以链接地址的形式存放,这时候就需要在上传图片的时候进行处理,所以callbacks下面的onImageUpload进行图片文件的处理。(这里貌似不能直接用onImageUpload),需要加上callbacks。然后调用sendFile()进行处理。 具体代码如下: 1.初始化富文本代码增加上传回调:#bannerhtml为你的页面中富文本控件ID,'/cms/info/cmsInfo'换成您要保存的图片附件路径 [pre] //富文本初始化 $('#bannerhtml').summernote({ height: 300, lang: 'zh-CN', callbacks: { onChange: function(contents, $editable) { $("input[name='bannerhtml']").val($('#bannerhtml').summernote('code'));//取富文本的值 } //处理上传回调 ,onImageUpload: function(files, editor, $editable) { sendFile(files, '#bannerhtml','/cms/info/cmsInfo'); } } }); [/pre] 2.增加上传函数,调用JEEPLUS自带的上传函数 [pre] function sendFile(files, id , uploadurl) { var data = new FormData(); data.append("file", files[0]); $.ajax({ data : data, type : "POST", url : "${ctx}/sys/file/webupload/upload?uploadPath="+uploadurl, //图片上传出来的url,返回的是图片上传后的路径,http格式 cache : false, contentType : false, processData : false, dataType : "json", enctype:"multipart/form-data", success: function(data) {//data是返回的hash,key之类的值,key是定义的文件名 $(id).summernote('insertImage', data.body.url); }, error:function(){ alert("上传失败"); } }); } [/pre] 到这里,就实现了异步上传图片,而不是以base64方式上传。face[微笑]
回帖