Vue项目集成quill-editor：自定义图片和视频上传

本文主要介绍了如何在Vue项目中使用带样式的quill-editor富文本编辑器，特别是如何处理图片和视频的上传，并结合了element-ui和七牛云存储的文件上传功能。 在Vue项目中集成vue-quill-editor，首先需要通过npm安装这个组件： ```bash npm install vue-quill-editor --save ``` 安装完成后，在`main.js`文件中全局引入并注册Vue-quill-editor： ```javascript import VueQuillEditor from 'vue-quill-editor' Vue.use(VueQuillEditor) ``` 在模板（HTML）部分，我们需要为编辑器绑定各种API事件，并创建一个隐藏的`input`元素，用于图片和视频的上传： ```html <template> <div> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"> </quill-editor> <!-- 文本长度限制提示 --> <div class="limit"> 当前已输入<span>{{nowLength}}</span>个字符，您还可以输入<span>{{SurplusLength}}</span>个字符。 </div> <!-- 隐藏的文件上传input --> <el-upload class="upload-demo" :action="qnLocation" :before-upload="beforeUpload" :data="uploadData" @success="upSuccess" ref="upload" style="display:none"> <el-button size="small" type="primary" id="imgInput" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="插入中,请稍候">点击上传</el-button> </el-upload> </div> </template> ``` 在图片和视频的上传处理中，`beforeUpload`可以用来预处理文件，例如将本地文件转换为base64格式。这里假设我们使用七牛云作为存储服务，所以`qnLocation`应指向七牛云的上传URL，`uploadData`可以包含七牛云的token等信息。 `beforeUpload`函数示例： ```javascript methods: { beforeUpload(file) { if (file.type.startsWith('image')) { // 将图片转换为base64 return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = e => resolve(e.target.result); reader.onerror = reject; reader.readAsDataURL(file); }); } else if (file.type.startsWith('video')) { // 对视频进行预处理，例如压缩等 // ... } }, upSuccess(response, file) { // 上传成功后，将返回的数据（如：文件的URL）插入到编辑器中 this.$refs.myQuillEditor.quill.insertEmbed(this.$refs.myQuillEditor.quill.getSelection().index, 'image', response.url); }, // 其他相关的方法... } ``` 对于视频插入，如果默认的弹框输入URL不满足需求，你可以自定义编辑器的模块来实现本地视频选择。这通常涉及监听编辑器的事件，比如`toolbar`模块的点击事件，然后在用户选择本地视频文件后调用自定义的上传逻辑。 通过vue-quill-editor，我们可以轻松地在Vue项目中实现一个功能丰富的富文本编辑器，并能自定义图片和视频的上传处理，满足特定业务需求。同时，结合element-ui可以提供更好的用户体验，如文件上传的进度提示。