vue-quill-editor+plupload富文本编辑器实例详解
1,先给vue项目中下载vue-quill-editor依赖npminstallvue-quill-editor--save
2,下载plupload依赖npminstallplupload--save
3,在组件中分别引入对应的js
import{quillEditor}from'vue-quill-editor' import'@/assets/js/crypto1/crypto/crypto.js' import'@/assets/js/crypto1/hmac/hmac.js' import'@/assets/js/crypto1/sha1/sha1.js' importBase64from'@/assets/js/base64.js' importpluploadfrom'plupload'
4,编写plupload上传图片需要的事件以及参数
letaccessid='阿里oss申请的accessid' letaccesskey='阿里oss申请的accesskey' lethost='阿里oss的存储文件地址' letbucket='image' letg_dirname='' letg_object_name='' letg_object_name_type='' vartimestamp letnow=timestamp=Date.parse(newDate())/1000 letpos='' letsuffix='' varpolicyText={ 'expiration':'2020-01-01T12:00:00.000Z',//设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了 'conditions':[ ['content-length-range',0,1048576000]//设置上传文件的大小限制 ] } varpolicyBase64=Base64.encode(JSON.stringify(policyText)) letmessage=policyBase64 varbytes=Crypto.HMAC(Crypto.SHA1,message,accesskey,{asBytes:true}) varsignature=Crypto.util.bytesToBase64(bytes) //选择上传名字是本地文件名字还是随机文件名字 functioncheck_object_radio(){ g_object_name_type='random_name' } //默认是上传到根目录 functionget_dirname(){ g_dirname='image/' } //获得随机的字符串 functionrandom_string(len){ len=len||32 varchars='ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' varmaxPos=chars.length varpwd='' for(vari=0;i{ this.loading=false console.log(res) if(res.data.code==='200'){ this.$emit('AddNoticeOff') this.$emit('notice_ajax',0) } }).catch((err)=>{ this.loading=false console.log(err) }) }, escape2Html(str){ vararrEntities={'lt':'<','gt':'>','nbsp':'','amp':'&','quot':'"'} returnstr.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){ returnarrEntities[t] }) }, data_zhan(){ letdata={ token:this.token(), id:this.AddNotice_id } this.$axios.post('/match/Notice/NoticeInfo',this.$qs.stringify(data)) .then((res)=>{ letnew_data=res.data.data if(res.data.code==='200'){ this.textarea_name=new_data.title this.content=this.escape2Html(new_data.content) console.log(this.escape2Html(new_data.content)) } }).catch((err)=>{ console.log(err) }) } }, computed:{ }, created(){ }, mounted(){ varthat=this varuploader=newplupload.Uploader({ runtimes:'html5,flash,silverlight,html4', browse_button:'selectfiles', multi_selection:true, //container:document.getElementById('container'), flash_swf_url:'./../assets/plupload-2.1.2/js/Moxie.swf', silverlight_xap_url:'./../assets/plupload-2.1.2/js/Moxie.xap', url:host, init:{ PostInit:function(){ console.log(7777) }, QueueChanged:function(up){//数组变化是发生 console.log(up) }, FileFiltered:function(up,files){ varfileSize=(Math.round(files.size*100/(1024*1024))/100).toString()//MB if(fileSize>10){ uploader.removeFile(files) } }, //图片成功添加到上传队列中后的事件 FilesAdded:function(up,files){ console.log(111) plupload.each(files,function(v,i){ }) console.log(files) set_upload_param(uploader,'',false) }, BeforeUpload:function(up,file){ console.log(3333) check_object_radio() get_dirname() set_upload_param(up,file.name,true) }, UploadProgress:function(up,file){ console.log(file.percent)//进度条设置 }, FileUploaded:function(up,file,info){ console.log(555) //获取富文本组件实例 console.log(that.$refs) letquill=that.$refs.myQuillEditor.quill if(info.status===200){ console.log(get_uploaded_object_name(file.name)) leturl=host+'/'+g_dirname+get_uploaded_object_name(file.name) //获取光标所在位置 letlength=quill.getSelection().index; //插入图片res.info为服务器返回的图片地址 quill.insertEmbed(length,'image',url) //调整光标到最后 quill.setSelection(length+1) }else{ this.$message.error('图片插入失败') } }, Error:function(up,err){ //document.getElementById('console').appendChild(document.createTextNode("\nErrorxml:"+err.response)) } } }) uploader.init() }, destroyed(){ } }
总结
以上所述是小编给大家介绍的vue-quill-editor+plupload富文本编辑器实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!