quill-video-image-module

介绍

quill视频上传，图片上传到服务器模块，用video标签替换iframe

软件架构

软件架构说明

安装教程

1. cnpm i vue-quill-editor
2. cnpm i quill
3. cnpm i quill-video-image-module

使用说明

<template> <div class="createArticle"> <quill-editor class="ql-editor" v-model="content" :options="editorOption"></quill-editor> </div> </template> <script> import 'quill/dist/quill.core.css' // import styles import 'quill/dist/quill.snow.css' // for snow theme import 'quill/dist/quill.bubble.css' // for bubble theme 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' // 引入video模块并注册 import video from 'quill-video-image-module/video'   Quill.register(video, true)    Quill.register('modules/ImageExtend', ImageExtend)   Quill.register('modules/VideoExtend', VideoExtend) export default {     components: {       quillEditor     }, data() { return {         content: '', // 富文本框参数设置         editorOption: {           modules: {             ImageExtend: {               loading: true, // 可选参数 是否显示上传进度和提示语               name: 'img', // 图片参数名               size: 1, // 可选参数 图片大小，单位为M，1M = 1024kb               action: 'https://127.0.0.1:5000/upload/img', // 服务器地址, 如果action为空，则采用base64插入图片 // response 为一个函数用来获取服务器返回的具体图片地址 // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}} // 则 return res.data.url               response: res => { return res.data.url; },               headers: () => {}, // 可选参数 设置请求头部               start: () => {}, // 可选参数 自定义开始上传触发事件               end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败               error: () => {}, // 可选参数 自定义网络错误触发的事件               change: () => {                 formData.append('key', localStorage.getItem('token')); }, // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData               sizeError: () => { alert('图片不能大于1M') } },             VideoExtend: {               loading: true,               name: 'img',               size: 100, // 可选参数 视频大小，单位为M，1M = 1024kb               action: 'https://127.0.0.1:5000/upload/img', // 视频上传接口               headers: (xhr) => { // set custom token(optional) },               change: (xhr, formData) => {   formData.append('key', localStorage.getItem('token')); },               response: (res) => { // video uploaded path // custom your own return res.data.url; },               sizeError: () => { alert('视频不能大于100M') } },             toolbar: {               container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置               handlers: {                 image: function() { // 劫持原来的图片点击按钮事件                   QuillWatch.emit(this.quill.id); },                 video: function() {                   QuillVideoWatch.emit(this.quill.id) } } } } } }; },     methods: {}, created() { } }; </script> 

<style>   .createArticle { padding: 40px 40px; } .ql-editor { min-height: 800px; } /* 解决粘贴后光标会自动弹到文档的初始位置 */ .ql-clipboard { position: fixed; display: none; left: 50%; top: 50%; } /* 富文本汉化 */ .ql-snow .ql-tooltip[data-mode='link']::before { content: '请输入链接地址:'; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0px; content: '保存'; padding-right: 0px; } .ql-snow .ql-tooltip[data-mode='video']::before { content: '请输入视频地址:'; } .ql-snow .ql-picker.ql-size .ql-picker-label::before,   .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: '14px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before { content: '10px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before { content: '18px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before { content: '32px'; } .ql-snow .ql-picker.ql-header .ql-picker-label::before,   .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: '文本'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before { content: '标题1'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { content: '标题2'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before { content: '标题3'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before { content: '标题4'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before { content: '标题5'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before { content: '标题6'; } .ql-snow .ql-picker.ql-font .ql-picker-label::before,   .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: '标准字体'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { content: '衬线字体'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { content: '等宽字体'; } </style>