1,先给vue项目中下载vue-quill-editor依赖npm install vue-quill-editor --save
2,下载plupload依赖npm install plupload --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' import Base64from '@/assets/js/base64.js' import pluploadfrom 'plupload'
4,编写plupload上传图片需要的事件以及参数
let accessid = '阿里oss申请的accessid' let accesskey = '阿里oss申请的accesskey' let host = '阿里oss的存储文件地址' let bucket = 'image' let g_dirname = '' let g_object_name = '' let g_object_name_type = '' var timestamp let now = timestamp = Date.parse(new Date())/ 1000 let pos = '' let suffix = '' var policyText = { 'expiration': '2020-01-01T12:00:00.000Z',// 设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了 'conditions': [ ['content-length-range',0,1048576000]// 设置上传文件的大小限制 ] } var policyBase64 = Base64.encode(JSON.stringify(policyText)) let message = policyBase64 var bytes = Crypto.HMAC(Crypto.SHA1,message,accesskey, {asBytes: true}) var signature = Crypto.util.bytesToBase64(bytes) // 选择上传名字是本地文件名字还是随机文件名字 function check_object_radio () { g_object_name_type = 'random_name' } // 默认是上传到根目录 function get_dirname () { g_dirname = 'image/' } // 获得随机的字符串 function random_string (len) { len = len || 32 var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' var maxPos = chars.length var pwd = '' for (var i = 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) { var arrEntities = {'lt': '','nbsp': ' ','amp': '&','quot': '"'} return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function (all,t) { return arrEntities[t] }) }, data_zhan () { let data = { token: this.token(), id: this.AddNotice_id } this.$axios.post('/match/Notice/NoticeInfo',this.$qs.stringify(data)) .then((res)=> { let new_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 () { var that = this var uploader = new plupload.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) { var fileSize = (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) let quill = that.$refs.myQuillEditor.quill if (info.status === 200) { console.log(get_uploaded_object_name(file.name)) let url = host+'/'+g_dirname+get_uploaded_object_name(file.name) // 获取光标所在位置 let length = 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("\nError xml:" + err.response)) } } }) uploader.init() }, destroyed () { } }
总结
以上所述是小编给大家介绍的vue-quill-editor+plupload富文本编辑器实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！
以上就是vue-quill-editor+plupload富文本编辑器实例详解的详细内容，更多请关注本站其它相关文章！
