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 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
javascript运动详解
Jul 06 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
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
一篇入门的php Class 文章
2007/04/04 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python数据可视化之画图
2019/01/15 Python
python多线程抽象编程模型详解
2019/03/20 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
PHP笔试题
2012/02/22 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
《骑牛比赛》教后反思
2014/04/22 职场文书
球队口号
2014/06/18 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript