Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use rich text to add upload audio function in vue quill editor". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use rich text to add upload audio function in vue quill editor" can help you solve the problem.

1. Preface

Vue-quill-editor is a commonly used rich text plug-in in vue projects, and its functions can meet most of the project requirements. However, in recent projects, audio files need to be uploaded in rich text, but vue-quill-editor this rich text only supports picture and video uploads; so this feature needs to be customized.

How to achieve this function?

Write a component that can only upload audio and hide it

Define a button in the toolbar of the rich text plug-in and call the upload component when clicked

Listen to the callback function of a successful upload and insert an audio tag in the rich text input box

two。 Function realization

2.1 implement upload components based on Element-ui and hide them (cannot be clicked by users)

Upload

Corresponding hook function:

ActionUrl: you can assign values directly according to the backend API.

BeforeUpload: verifying if it is audio

BeforeUpload (file) {/ / file.type seems to only return the format of the picture, and the rest will be "", so you need to get the suffix name to determine the file format let pointIndex = file.name.lastIndexOf ("."); let fileType = file.name.substring (pointIndex+1) / / get the file suffix / / if (fileType! = = 'mp3' & & fileType! = =' ogg' & & fileType! = 'wav') {if (fileType! = =' mp3' & & fileType!! = 'ogg') {this.$message.error (' the file you selected is not audio, only mp3 and ogg formats are supported') return false}}

HandleSuccess: callback for successful upload, where the main functions are implemented, which is described later.

UploadIng: setting display loading

UploadIng () {/ / shows loading this.fullscreenLoading = true} when uploading

2.2 define a button in the toolbar of the rich text plug-in and call the upload component when clicked

Note: vue-quill-editor is based on the secondary encapsulation of quill rich text (the source code can be easily seen), so you need to see the quill directly in the configuration method.

a. Modify the editorOption configuration and add a button:

/ / Rich text settings editorOption: {modules: {..., / / other configurations For example, 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'] / / newly added tool], handlers: {'voice': function (value) {/ / add tool method That is, to imitate the button document.querySelector ('.uploadVoiceBtn'). Click ()}, initVoiceButton:function () {/ / initialize the "voice" button style const voiceButton = document.querySelector ('. Ql-voice') when clicking. / / "ql-" is a prefix / / added style automatically added by the plug-in. Use fontawesome to initialize the icon style voiceButton.classList.add ('fa'); voiceButton.classList.add (' fa-volume-up'); voiceButton.classList.add ('fa-lg'); / / of course, you can write the style directly by hand, such as / / voiceButton.style.cssText = "width:80px; border:1px solid # ccc; border-radius:5px" "; / / voiceButton.innerText=" upload audio ";}}

B. initialize the display button in mounted

Mounted () {this.editorOption.initVoiceButton (); / / initialize the audio icon so that it can display}

After the addition is completed:

If you are in a different file, that is, the configuration file and component calls are not in the same file, please refer to: add custom methods in the quill-editor component toolbar, this article is clearly written in the custom buttons section!

3. Listen to the callback function of a successful upload and insert an audio tag in the rich text input box

This step is the core of the whole function!

There are a lot of text displaying custom functions on the Internet, but they are mainly pictures. Most of them use quill's pasteHTML method, but I can't implement it after I try. When such a string is added to a rich text-bound variable, it cannot be displayed. Finally, you can use insertEmbed to insert objects into rich text, but it seems that this method can only insert image, not other tags.

Solution: custom FileBlot = > > Quill calls custom Blot (that is, customize a Quill tag that can parse the display, and add it to it)

Quill-editor component call

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

HandleSuccess: callback for successful upload, where the main functions are implemented

HandleSuccess (res, file, fileList) {this.fullscreenLoading = false; / / get rich text component instance let quill = this.$refs.myTextEditor.quill if (res.code = 0) {/ / if upload succeeds let length = quill.getSelection () .index; / / get cursor location let BlockEmbed = Quill.import ('blots/block/embed') Class AudioBlot extends BlockEmbed {static create (value) {let node = super.create (); node.setAttribute ('src', value.url); / / set the src property node.setAttribute (' controls', true) of audio; / / set the controls of audio, otherwise he will not display node.setAttribute ('controlsList',' nodownload') / / set the download function of audio to not download node.setAttribute ('id',' voice'); / / set an id return node;} / / static value (node) {/ / return {/ / url: node.getAttribute ('src') / /}; / /}} AudioBlot.blotName =' audio'; AudioBlot.tagName = 'audio' / / the custom tag is audio Quill.register (AudioBlot); / / insertEmbed (index: Number (insertion location), type: String (tag type), value: any (parameter, which will be passed into the method of create), source: String = 'api') quill.insertEmbed (length,' audio', {url: res.data.url}, "api"); quill.setSelection (length + 1) / / move the cursor position backward one bit} else {this.$message.error (res.msg); / / upload failed with error message}}

Effect after completion:

This is the end of the content about "how to use vue quill editor to add rich text to upload audio". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.