vue-quill-editor 富文本编辑器上传视频
插入视频
富文本编辑器中插入视频思路:劫持原来的视频上传事件,然后,自定义上传组件将视频上传到服务器,服务器返回一个视频链接,再插入到富文本编辑器中。
封装富文本编辑器组件 quill.vue
:
<!--富文本编辑器-->
<template>
<div class="rich-text-editor-container" v-loading="loading">
<quill-editor :content="content" :options="editorOptions" class="ql-editor" ref="myQuillEditor" @change="onEditorChange($event)">
</quill-editor>
<!--视频上传弹窗-->
<div>
<el-dialog :close-on-click-modal="false" width="50%" style="margin-top: 1px" title="视频上传" :visible.sync="videoForm.show" append-to-body>
<el-tabs v-model="videoForm.activeName">
<el-tab-pane label="添加视频链接" name="first">
<el-input v-model="videoForm.videoLink" placeholder="请输入视频链接" clearable></el-input>
<el-button type="primary" size="small" style="margin: 20px 0px 0px 0px " @click="insertVideoLink(videoForm.videoLink)">确认
</el-button>
</el-tab-pane>
<el-tab-pane label="本地视频上传" name="second">
<el-upload v-loading="loading" style="text-align: center;" drag :action="uploadVideoConfig.uploadUrl" accept="video/*" :name="uploadVideoConfig.name" :before-upload="onBeforeUploadVideo" :on-success="onSuccessVideo" :on-error="onErrorVideo" :multiple="false">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传MP4文件,且不超过{
{
uploadVideoConfig.maxSize}}M</div>
</el-upload>
</el-tab-pane>
</el-tabs>
</el-dialog>
</div>
</div>
</template>
<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {
quillEditor } from 'vue-quill-editor'
// 工具栏
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{
list: "ordered" }, {
list: "bullet" }], // 有序、无序列表
[{
indent: "-1" }, {
indent: "+1" }], // 缩进
[{
size: ["small", false, "large", "huge"] }], // 字体大小
[{
header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{
color: [] }, {
background: [] }], // 字体颜色、字体背景颜色
[{
align: [] }], // 对齐方式
["clean"], // 清除文本格式
['video'] // 视频
]
export default {
name: 'RichTextEditor',
components: {
quillEditor
},
props: {
/* 编辑器的内容 */
content: {
// 返回的html片段
type: String,
default: ''
},
// 视频上传配置
uploadVideoConfig: {
type: Object,
default () {
return {
uploadUrl: '', // 上传地址
maxSize: 10, // 图片上传大小限制,默认不超过2M
name: 'Filedata' // 图片上传字段
}
}
}
},
data () {
let _self = this;
return {
loading: false, // 加载loading
editorOptions: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'video': () => {
// 覆盖默认的上传视频,点击视频图标,显示弹窗
_self.videoForm.show = true
}
}
}
}
},
// 视频上传变量
videoForm: {
show: false, // 显示插入视频链接弹框的标识
videoLink: '',
activeName: 'first'
}
}
},
mounted () {
},
methods: {
// 文本编辑
onEditorChange