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

<!-- 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 富文本添加上传音频功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/8ab0528f8addb2ec7f611ce4e6d3f126.html