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

这篇文章主要介绍“vue quill editor怎么使用富文本添加上传音频功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue quill editor怎么使用富文本添加上传音频功能”文章能帮助大家解决问题。1. 前言
vue-quill-editor 是vue项目中常用的富文本插件，其功能能满足大部分的项目需求。但是，最近项目中，需要在富文本中上传音频文件，但是vue-quill-editor这个富文本仅支持图片，视频上传；所以这个功能需要自定义。怎么实现这个功能？写一个只能上传音频的组件，并且隐藏在富文本插件的toolbar定义一个按钮，点击时调用上传组件监听上传成功的回调函数，在富文本输入框中插入音频标签2. 功能实现
2.1 基于Element-ui实现上传组件，并且隐藏（不能让用户点击）
对应的钩子函数：actionUrl：直接根据后台接口赋值即可
beforeUpload：验证是否为音频
handleSuccess：上传成功的回调，主要功能实现的地方，后面介绍uploadIng：设置显示loading
2.2 在富文本插件的香港云主机toolbar定义一个按钮，点击时调用上传组件注意：vue-quill-editor是基于quill富文本的二次封装（源码可以很容易看出来），所以需要看配置方法的直接去看quill即可A. 修改 editorOption 配置，添加一个按钮：B. mounted中初始化显示按钮添加完成后效果：如果是在不同的文件，即配置文件和组件调用不在同一个文件，请参考：在quill-editor组件工具栏中添加自定义的方法，这篇文章在自定义按钮部分写的很清楚！3. 监听上传成功的回调函数，在富文本输入框中插入音频标签
这一步骤是整个功能的核心！！！网上有很多显示自定义功能显示的文字，但主要都是以图片为主。大多用的都是 quill 的 pasteHTML 方法，但我试了以后并不能实现。将这样的字符串加入到富文本绑定的变量上面后，并不能显示。最后，可以使用insertEmbed插入对象到富文本中，但是，这个方法好像也只能插入image，不能插入其他的标签。解决方法：自定义FileBlot ==>> Quill调用自定义Blot （即自定义一个Quill能解析显示的标签，并且添加的里面去）quill-editor 组件调用
handleSuccess：上传成功的回调，主要功能实现的地方完成后效果：关于“vue quill editor怎么使用富文本添加上传音频功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注开发云行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: Revit怎么创建柱子族类型

本篇内容介绍了“Revit怎么创建柱子族类型”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1.XYZ位置信息，就是我们要把这个实例建在什么地方。这里我们就先把它…