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


Posted in Javascript onJanuary 14, 2020

1. 前言

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

怎么实现这个功能?

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

2. 功能实现

2.1 基于Element-ui实现上传组件,并且隐藏(不能让用户点击)

<!-- 
首先,必须隐藏这个元素:display:none;
v-loading.fullscreen.lock:设置上传时显示loading,值为true/false;
action:设置上传的地址;
before-upload:上传前的钩子函数,验证是否为音频文件;
on-success:上传成功的钩子函数;
on-progress:上传时的钩子函数,设置显示loading
 -->
<div style="display:none">
  <el-upload
    v-loading.fullscreen.lock="fullscreenLoading"
    :action="actionUrl"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-progress="uploadIng"
  >
  <el-button size="small" class="uploadVoiceBtn" type="primary">upload</el-button>
  </el-upload>
</div>

对应的钩子函数:

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

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

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"按钮样式
    const voiceButton = 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:1px solid #ccc; border-radius:5px;";
    // voiceButton.innerText="上传音频";
  }
},

B. mounted中初始化显示按钮

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

添加完成后效果:

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

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

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

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

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

解决方法:自定义FileBlot ==>> Quill调用自定义Blot (即自定义一个Quill能解析显示的标签,并且添加的里面去)

quill-editor 组件调用

import { quillEditor, Quill } from 'vue-quill-editor'
components: {
  quillEditor
},
<!-- change是内容改变后的回调函数,做页面处理,这里不说,自行根据系统页面处理 -->
<quill-editor ref="myTextEditor" v-model="editorTempValue" :options="editorOption" @change="onEditorChange($event)"> </quill-editor>

handleSuccess:上传成功的回调,主要功能实现的地方

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

    let BlockEmbed = Quill.import('blots/block/embed');
    class AudioBlot extends BlockEmbed {
      static create(value) {
        let node = 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
        return node;
      }

      // static value(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 使用富文本添加上传音频功能

总结

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

Javascript 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
JavaScript事件冒泡机制原理实例解析
Jan 14 #Javascript
JS window对象简单操作完整示例
Jan 14 #Javascript
让mocha支持ES6模块的方法实现
Jan 14 #Javascript
JavaScript遍历数组的方法代码实例
Jan 14 #Javascript
JavaScript回调函数callback用法解析
Jan 14 #Javascript
JS document对象简单用法完整示例
Jan 14 #Javascript
JS document内容及样式操作完整示例
Jan 14 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
Apache设置虚拟WEB
2006/10/09 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
js document.write()使用介绍
2014/02/21 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
js计算德州扑克牌面值的方法
2015/03/04 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
python中如何打包用户自定义模块
2020/09/23 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
大学生毕业自我鉴定范文
2013/11/03 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
优秀家长事迹材料
2014/05/17 职场文书
孝女彩金观后感
2015/06/10 职场文书
大学生暑假实习总结
2015/07/13 职场文书
七年级作文之雪景
2019/11/18 职场文书