vue quill editor 使用富文本添加上传音频功能

2023-08-03 02:43:03 82

1.前言

vue-quill-editor是vue项目中常用的富文本插件，其功能能满足大部分的项目需求。但是，最近项目中，需要在富文本中上传音频文件，但是vue-quill-editor这个富文本仅支持图片，视频上传；所以这个功能需要自定义。

怎么实现这个功能？

写一个只能上传音频的组件，并且隐藏
在富文本插件的toolbar定义一个按钮，点击时调用上传组件
监听上传成功的回调函数，在富文本输入框中插入音频标签

2.功能实现

2.1基于Element-ui实现上传组件，并且隐藏（不能让用户点击）




upload

对应的钩子函数：

actionUrl：直接根据后台接口赋值即可
beforeUpload：验证是否为音频

beforeUpload(file){
//file.type好像只能返回图片的格式，其他的将会是""，所以需要自己获取后缀名判断文件格式
letpointIndex=file.name.lastIndexOf(".");
letfileType=file.name.substring(pointIndex+1);//获取到文件后缀名
//if(fileType!=='mp3'&&fileType!=='ogg'&&fileType!=='wav'){
if(fileType!=='mp3'&&fileType!=='ogg'){
this.$message.error('你选择的文件不是音频哦，仅支持mp3和ogg格式')
returnfalse
}
},

handleSuccess：上传成功的回调，主要功能实现的地方，后面介绍

uploadIng：设置显示loading

uploadIng(){//上传时显示loading
this.fullscreenLoading=true
}

2.2在富文本插件的toolbar定义一个按钮，点击时调用上传组件

注意：vue-quill-editor是基于quill富文本的二次封装（源码可以很容易看出来），所以需要看配置方法的直接去看quill即可

A.修改editorOption配置，添加一个按钮：

//富文本设置
editorOption:{
modules:{
...,//其他配置，如quill-image-extend-module
toolbar:{
container:[
['bold','italic','underline','strike'],
[{'size':['small',false,'large','huge']}],
[{'header':[1,2,3,4,5,6,false]}],
[{'color':[]},{'background':[]}],
['blockquote','code-block'],
['link','image'],
['voice']//新添加的工具
],
handlers:{
'voice':function(value){//添加工具方法，即点击时模仿点击上传组件的按钮
document.querySelector('.uploadVoiceBtn').click()
}
}
}
},
initVoiceButton:function(){//初始化"voice"按钮样式
constvoiceButton=document.querySelector('.ql-voice');//"ql-"是插件自动加的前缀

//添加样式，使用fontawesome初始化图标的样式
voiceButton.classList.add('fa');
voiceButton.classList.add('fa-volume-up');
voiceButton.classList.add('fa-lg');

//当然，可以直接手写样式，如：
//voiceButton.style.cssText="width:80px;border:1pxsolid#ccc;border-radius:5px;";
//voiceButton.innerText="上传音频";
}
},

B.mounted中初始化显示按钮

mounted(){
this.editorOption.initVoiceButton();//初始化音频图标，这样才能显示
},

添加完成后效果：

如果是在不同的文件，即配置文件和组件调用不在同一个文件，请参考：在quill-editor组件工具栏中添加自定义的方法，这篇文章在自定义按钮部分写的很清楚！

3.监听上传成功的回调函数，在富文本输入框中插入音频标签

这一步骤是整个功能的核心！！！

网上有很多显示自定义功能显示的文字，但主要都是以图片为主。大多用的都是quill的pasteHTML方法，但我试了以后并不能实现。将这样的字符串加入到富文本绑定的变量上面后，并不能显示。最后，可以使用insertEmbed插入对象到富文本中，但是，这个方法好像也只能插入image，不能插入其他的标签。

解决方法：自定义FileBlot==>>Quill调用自定义Blot（即自定义一个Quill能解析显示的标签，并且添加的里面去）

quill-editor组件调用

import{quillEditor,Quill}from'vue-quill-editor'
components:{
quillEditor
},

handleSuccess：上传成功的回调，主要功能实现的地方

handleSuccess(res,file,fileList){
this.fullscreenLoading=false;
//获取富文本组件实例
letquill=this.$refs.myTextEditor.quill
if(res.code===0){//如果上传成功
letlength=quill.getSelection().index;//获取光标所在位置

letBlockEmbed=Quill.import('blots/block/embed');
classAudioBlotextendsBlockEmbed{
staticcreate(value){
letnode=super.create();
node.setAttribute('src',value.url);//设置audio的src属性
node.setAttribute('controls',true);//设置audio的controls，否则他将不会显示
node.setAttribute('controlsList','nodownload');//设置audio的下载功能为不能下载
node.setAttribute('id','voice');//设置一个id
returnnode;
}

//staticvalue(node){
//return{
//url:node.getAttribute('src')
//};
//}
}
AudioBlot.blotName='audio';
AudioBlot.tagName='audio';//自定义的标签为audio
Quill.register(AudioBlot);

//insertEmbed(index:Number(插入的位置),type:String(标签类型),value:any(参数，将传入到create的方法中去),source:String='api')
quill.insertEmbed(length,'audio',{url:res.data.url},"api");
quill.setSelection(length+1);//光标位置向后移动一位
}else{
this.$message.error(res.msg);//上传失败，提示错误信息
}
},

完成后效果：

总结

以上所述是小编给大家介绍的vue-quill-editor富文本添加上传音频功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue quill editor 使用富文本添加上传音频功能

热门推荐

随机推荐