1. Download NPM

npm install vue-quill-editor
Copy the code

2. Import the main.js file

import VueQuillEditor from 'vue-quill-editor'; import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.bubble.css'; Vue.use(VueQuillEditor, {placeholder: "Input here..." , modules: { //formula: true, toolbar: { container: "#toolbar" } } }); let EmbedBlot = VueQuillEditor.Quill.import('blots/block/embed'); class AudioBlot extends EmbedBlot { static create(value) { let node = super.create(); node.setAttribute('src', value.url); // Set audio's SRC attribute node.setAttribute('controls', true); // Set audio's controls, otherwise it will not display Node.setattribute ('controlsList', 'nodownload'); // Set audio to node.setattribute ('id', 'voice'); // Set an id return node; } } AudioBlot.blotName = 'audio'; AudioBlot.tagName = 'audio'; VueQuillEditor.Quill.register(AudioBlot);Copy the code

3. Use it on the page

<div style="height:300px; margin-left:30px;" > <quill-editor v-model="content" ref="editor"> <div id="toolbar" slot="toolbar"> <button class="ql-bold" </button> <button class="ql-underline" </button> <button class="ql-underline" </button> <button class="ql-list" > </button> <button class="ql-list" > Value ="ordered" title=" ordered" ></button> <button class="ql-list" value="bullet" title=" ordered" ></button> <select Class =" qL-header "title=" paragraph format "> <option selected> Body </option> <option value="1"> title </option> </select> <select Class ="ql-color" value="color" title=" font color" ></select> </select> <select class="ql-align" value="align" title=" align" ></select> < el-icon ="el-icon-upload" @click="upload" title=" upload recording "></el-button> </div> </quill-editor> // upload file <el-upload action="/ API /edu/upload" :headers="{token:token}" :on-progress="uploadIng" :on-success="handleSuccess" :on-error="uploadError" :before-upload="beforeUpload" :show-file-list="false" style="display:none" > <el-button size="small" type="primary" Id ="upload"></el-button> </el-upload> </div> //upload function () { document.getElementById("upload").click(); HandleSuccess: function (res) {let quill = this.$refs.editor. if (res.code == 200) { let length = quill.selection.savedRange.index; quill.insertEmbed(length, "audio", { url: res.data.url }); quill.setSelection(length + 1); } else this.$message.error(" upload failed "); },Copy the code