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


Posted in Javascript onOctober 19, 2018

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 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
论JavaScript模块化编程
Mar 07 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
javascript实现留言板功能
Feb 08 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 #Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 #Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 #Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 #Javascript
clipboard在vue中的使用的方法示例
Oct 19 #Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 #Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 #Javascript
You might like
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
php7 新增功能实例总结
2020/05/25 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
javascript高亮效果的二种实现方法
2008/09/14 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python实现进程同步和通信的方法
2018/01/02 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
Python使用python-docx读写word文档
2019/08/26 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
大学生求职工作的自我评价
2014/02/13 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
大学军训心得体会800字
2016/01/11 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技