Vue-quill-editor视频与图片服务器上传模块，使用video标签

"该资源主要介绍了如何在Vue项目中使用vue-quill-editor组件实现视频上传和图片上传到服务器，并且将原本使用iframe展示的视频替换为video标签，以提高用户体验和兼容性。" 在 Vue.js 应用中，vue-quill-editor 是一个流行的富文本编辑器组件，它允许用户编辑和格式化文本，包括添加图片和视频。针对视频和图片的上传需求，quill-video-image-module 提供了一个扩展功能，使我们能够将上传的媒体内容直接存储到服务器，并以更友好的方式呈现。 安装这个扩展模块，你需要先确保已经安装了 vue-quill-editor、quill 以及 quill-video-image-module。这可以通过以下命令完成： ```bash cnpm i vue-quill-editor cnpm i quill cnpm i quill-video-image-module ``` 在使用时，需要引入相关的 CSS 样式以支持编辑器的主题，例如 Snow 主题和 Bubble 主题： ```javascript import 'quill/dist/quill.core.css'; // 导入核心样式 import 'quill/dist/quill.snow.css'; // 导入 Snow 主题样式 import 'quill/dist/quill.bubble.css'; // 导入 Bubble 主题样式 ``` 接下来，你需要导入并注册 quill-video-image-module 中的视频和图片扩展模块： ```javascript import { quillEditor, Quill } from 'vue-quill-editor'; import { container } from 'quill-video-image-module'; import { ImageExtend, QuillWatch } from 'quill-video-image-module/quill-image-module'; import { VideoExtend, QuillVideoWatch } from 'quill-video-image-module/quill-video-module'; import video from 'quill-video-image-module/video'; Quill.register(video, true); Quill.register('modules/ImageExtend', ImageExtend); Quill.register('modules/VideoExtend', VideoExtend); ``` 在 Vue 实例的 data 函数中，你可以定义富文本编辑器的内容以及其配置项 `editorOption`。例如，对于图片和视频的上传，你可以配置如下： ```javascript data() { return { content: '', editorOption: { modules: { ImageExtend: { loading: true, // 可选参数，是否显示上传进度和提示语 name: 'img', // 图片参数名 size: 2, // 可选参数，图片大小限制，单位为MB，例如1MB=1048576 serverUrl: 'http://your-server-url.com/upload', // 你的服务器上传接口地址 headers: { 'X-CSRF-Token': 'your-csrf-token' }, // 如果需要，可以添加请求头 }, // 其他配置... }, }, }; }, ``` 在实际使用中，你还需要在你的 Vue 组件模板中插入 `quillEditor` 组件，以便用户可以进行编辑操作： ```html <template> <div> <quill-editor :content="content" :options="editorOption" @blur="onBlur" @focus="onFocus" @ready="onReady"></quill-editor> </div> </template> ``` 以上配置完成后，用户在编辑器中插入的视频将会以 video 标签的形式展示，而不是传统的 iframe，这样可以更好地控制视频播放和样式，同时图片和视频都会通过自定义的服务器接口进行上传，提供了更安全、可控的媒体管理方式。