vue-quill-editor+plupload富文本编辑器实例详解

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'

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 timestamplet now = timestamp = Date.parse(new Date())/ 1000let 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 = policyBase64var 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.quillif (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 () {}}