vue-quill-editor+plupload富文本编辑器实例详解
作者:张xiao旦
这篇文章主要介绍了vue-quill-editor+plupload富文本编辑器实例详解,需要的朋友可以参考下
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 < len;i++) { pwd += chars.charAt(Math.floor(Math.random()* maxPos)) } return pwd } // 获取文件后缀 function get_suffix (filename) { pos = filename.lastIndexOf('.') suffix = '' if (pos !== -1) { suffix = filename.substring(pos) } return suffix } // 获取文件名字 function calculate_object_name (filename) { if (g_object_name_type === 'local_name') { g_object_name += filename }else if (g_object_name_type === 'random_name') { suffix = get_suffix(filename) g_object_name = random_string(10)+ new Date().getTime()+ suffix // g_object_name = filename } return '' } function get_uploaded_object_name (filename) { if (g_object_name_type === 'local_name') { var tmp_name = g_object_name tmp_name = tmp_name.replace(filename,filename) return tmp_name }else if (g_object_name_type === 'random_name') { return g_object_name } } // 设置上传参数 function set_upload_param (up,filename,ret) { // g_object_name = g_dirname if (filename !== '') { suffix = get_suffix(filename) calculate_object_name(filename) } let new_multipart_params = { 'Filename': g_dirname + g_object_name, 'key': g_dirname + g_object_name, 'policy': policyBase64, 'OSSAccessKeyId': accessid, 'success_action_status': '200',// 让服务端返回200,不然,默认会返回204 'signature': signature } console.log(g_object_name) up.setOption({ 'url': host, 'multipart_params': new_multipart_params }) up.start() } const toolbarOptions = [ ['bold','italic','underline','strike'],// toggled buttons ['blockquote','code-block'], [{'header': 1}, {'header': 2}],// custom button values [{'list': 'ordered'}, {'list': 'bullet'}], [{'script': 'sub'}, {'script': 'super'}],// superscript/subscript [{'indent': '-1'}, {'indent': '+1'}],// outdent/indent [{'direction': 'rtl'}],// text direction [{'size': ['small',false,'large','huge']}],// custom dropdown [{'header': [1,2,3,4,5,6,false]}], [{'color': []}, {'background': []}],// dropdown with defaults from theme [{'font': []}], [{'align': []}], ['link','image'], ['clean']// remove formatting button ] export default { name: 'AddNotice', components: { quillEditor }, data () { return { loading: false, textarea_name: '', textarea_nei: '', content: null, editorOption:{ placeholder: '', theme: 'snow',// or 'bubble' modules: { toolbar: { container: toolbarOptions,// 工具栏 handlers: { 'image': function (value) { if (value) { // alert(1) document.querySelector('#selectfiles').click() }else { this.quill.format('image',false); } } } } } } } }, props: { Notice_id: Number, AddNotice_id: Number }, watch: {}, methods: { data_qing () { this.textarea_name = '' this.content = '' }, AddNoticeOff () { this.$emit('AddNoticeOff') }, gonggao_push () { this.loading = true let data = { token: this.token(), id: this.AddNotice_id, match_id: this.Notice_id, title: this.textarea_name, content: this.content } this.$axios.post('/match/Notice/NoticeSave',this.$qs.stringify(data)) .then((res)=> { 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': '<','gt': '>','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富文本编辑器实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!