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 相关文章推荐
javascript中的self和this用法小结
Feb 08 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
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
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
layUI实现列表查询功能
2019/07/27 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Django REST framework 分页的实现代码
2019/06/19 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
python文字转语音的实例代码分析
2019/11/12 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
final, finally, finalize的区别
2012/03/01 面试题
大学生会计职业生涯规划范文
2014/02/28 职场文书
文明市民先进事迹
2014/05/15 职场文书
普通党员个人整改措施
2014/10/27 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
质量保证书怎么写
2015/02/27 职场文书
学校团代会开幕词
2016/03/04 职场文书
我的收音机情缘
2022/04/05 无线电
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server