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

2018-10-19 34 张xiao旦

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

展开阅读全文

更多Javascript文章

JavaScript全局函数使用简单说明
Mar 11 33
Jquery带搜索框的下拉菜单
May 06 27
js中string和number类型互转换技巧(分享)
Nov 28 29
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 21
Vue.js之slot深度复制详解
Mar 10 11
angular学习之ngRoute路由机制
Apr 12 28
js分页之前端代码实现和请求处理
Aug 04 21
手机访问当前页面