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富文本编辑器实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！