vue-quill-editor富文本編輯器上傳視頻功能詳解
更新時間：2023年05月30日 09:17:04 作者：＊且聽風吟
需求需要實現(xiàn)富文本的功能,同時富文本中還可以上傳視頻和圖片,選來選去最后決定了用這個富文本編輯器,下面這篇文章主要給大家介紹了關(guān)于vue-quill-editor富文本編輯器上傳視頻功能的相關(guān)資料,需要的朋友可以參考下
插入視頻
富文本編輯器中插入視頻思路：劫持原來的視頻上傳事件，然后，自定義上傳組件將視頻上傳到服務器，服務器返回一個視頻鏈接，再插入到富文本編輯器中。
封裝富文本編輯器組件 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: {
/* 編輯器的內(nèi)容 */
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 ({ quill, html, text }) {
console.log('editor changed:', quill, html, text)
console.log('html.replace(/<[^>]*>|/g:', html.replace(/<[^>]*>|/g))
this.$emit('update:content', html)
this.$emit('change', html)
},
hideLoading () {
this.loading = false
},
/** --------- 視頻上傳相關(guān) start --------- */
insertVideoLink (videoLink) {
if (!videoLink) return this.$message.error('視頻地址不能為空！')
this.videoForm.show = false
let quill = this.$refs['myQuillEditor'].quill
// 獲取富文本
let range = quill.getSelection()
// 獲取光標位置：當編輯器中沒有輸入文本時，這里獲取到的 range 為 null
let index = range ? range.index : 0
// 在光標所在位置 插入視頻
quill.insertEmbed(index, 'video', videoLink)
// 調(diào)整光標到最后
quill.setSelection(index + 1)
},
// el-文件上傳組件
onBeforeUploadVideo (file) {
this.loading = true
let acceptArr = ['video/mp4']
const isVideo = acceptArr.includes(file.type)
const isLt1M = file.size / 1024 / 1024 < this.uploadVideoConfig.maxSize
if (!isVideo) {
this.hideLoading()
this.$message.error('只能上傳mp4格式文件!')
}
if (!isLt1M) {
this.hideLoading()
this.$message.error(`上傳文件大小不能超過 ${this.uploadVideoConfig.maxSize}MB!`)
}
return isLt1M && isVideo
},
// 文件上傳成功時的鉤子
onSuccessVideo (res) {
this.hideLoading()
if (res.code === '100') {
this.insertVideoLink(res.url)
} else {
this.$message.error(res.desc)
}
},
// 文件上傳失敗時的鉤子
onErrorVideo () {
this.hideLoading()
this.$message.error('上傳失敗')
},
/**--------- 視頻上傳相關(guān) end --------- */
}
}
</script>
<style lang='less'>
.rich-text-editor-container .ql-container {
height: 300px;
}
.rich-text-editor-container .ql-editor {
padding: 0;
}
.rich-text-editor-container .ql-tooltip {
left: 5px !important;
}
</style>頁面使用封裝的富文本編輯器組件，新建 add.vue：
<template>
<div>
<editor :content="content" v-model="content" :height="480" />
</div>
</template>
<script>
import Editor from "./quill";
export default {
components: {
Editor
},
data() {
return {
content: ""
};
}
};
</script>設(shè)置工具欄中文標題
新建 quill-title.js：
// 給工具欄設(shè)置title
const titleConfig = {
'ql-bold': '加粗',
'ql-font': '字體',
'ql-code': '插入代碼',
'ql-italic': '斜體',
'ql-link': '添加鏈接',
'ql-color': '字體顏色',
'ql-background': '背景顏色',
'ql-size': '字體大小',
'ql-strike': '刪除線',
'ql-script': '上標/下標',
'ql-underline': '下劃線',
'ql-blockquote': '引用',
'ql-header': '標題',
'ql-indent': '縮進',
'ql-list': '列表',
'ql-align': '文本對齊',
'ql-direction': '文本方向',
'ql-code-block': '代碼塊',
'ql-formula': '公式',
'ql-image': '圖片',
'ql-video': '視頻',
'ql-clean': '清除字體樣式'
}
export function setQuillTitle () {
const oToolBar = document.querySelector('.ql-toolbar')
const aButton = oToolBar.querySelectorAll('button')
const aSelect = oToolBar.querySelectorAll('select')
aButton.forEach(function (item) {
if (item.className === 'ql-script') {
item.value === 'sub' ? item.title = '下標' : item.title = '上標'
} else if (item.className === 'ql-indent') {
item.value === '+1' ? item.title = '向右縮進' : item.title = '向左縮進'
} else {
item.title = titleConfig[item.className]
}
})
// 字體顏色和字體背景特殊處理，兩個在相同的盒子
aSelect.forEach(function (item) {
if (item.className.indexOf('ql-background') > -1) {
item.previousSibling.title = titleConfig['ql-background']
} else if (item.className.indexOf('ql-color') > -1) {
item.previousSibling.title = titleConfig['ql-color']
} else {
item.parentNode.title = titleConfig[item.className]
}
})
}修改 quill.vue 文件：
// 設(shè)置title
import { setQuillTitle } from './quill-title.js'在 mounted 中調(diào)用 setQuillTitle 方法：
mounted () {
// 初始給編輯器設(shè)置title
setQuillTitle()
}但是，以上富文本編輯器有一個問題：就是 vue-quill-editor 默認是以 iframe 保存的，插入到編輯器中的標簽是 <iframe class=\"ql-video\" frameborder=\"0\" allowfullscreen=\"true\" src=\"https://xxx\"></iframe>，如下圖：
但是，實際使用過程中，需要的是插入一個 video 標簽。
修改視頻iframe標簽為video
新建 quill-video.js：
import { Quill } from "vue-quill-editor";
// 源碼中是import直接倒入，這里要用Quill.import引入
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')
const ATTRIBUTES = ['height', 'width']
class Video extends BlockEmbed {
static create(value) {
const node = super.create(value)
// 添加video標簽所需的屬性
node.setAttribute('controls', 'controls')
node.setAttribute('type', 'video/mp4')
node.setAttribute('src', this.sanitize(value))
return node
}
static formats(domNode) {
return ATTRIBUTES.reduce((formats, attribute) => {
if (domNode.hasAttribute(attribute)) {
formats[attribute] = domNode.getAttribute(attribute)
}
return formats
}, {})
}
static sanitize(url) {
return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member
}
static value(domNode) {
return domNode.getAttribute('src')
}
format(name, value) {
if (ATTRIBUTES.indexOf(name) > -1) {
if (value) {
this.domNode.setAttribute(name, value)
} else {
this.domNode.removeAttribute(name)
}
} else {
super.format(name, value)
}
}
html() {
const { video } = this.value()
return `<a href="${video}" rel="external nofollow" rel="external nofollow" >${video}</a>`
}
}
Video.blotName = 'video' // 這里不用改，樓主不用iframe，直接替換掉原來，如果需要也可以保留原來的，這里用個新的blot
Video.className = 'ql-video'
Video.tagName = 'video' // 用video標簽替換iframe
export default Video
修改 quill.vue 文件：
import { quillEditor, Quill } from 'vue-quill-editor'
// 這里引入修改過的video模塊并注冊
import Video from './video'
Quill.register(Video, true)如下圖：
在頁面可以看到，插入到編輯器中的標簽是 <video class=\"ql-video\" controls=\"controls\" type=\"video/mp4\" src=\"xxx\"></video>，如下圖：
設(shè)置video 標簽自定義屬性
有時候，還需要給 video 標簽添加一些自定義的屬性：修改 quill-video.js 文件：
修改 quill.vue 文件：
這樣，就給 video 標簽加上了自定義屬性：<video class=\"ql-video\" controls=\"controls\" playsinline=\"true\" webkit-playsinline=\"true\" type=\"video/mp4\" poster=\"https://xxx\" src=\"https://xxx\"></video>。
PS：以此類推，也可以給 video 標簽添加一些其它屬性，例如 width，height 等等啦，只需要照著上面的方式修改對應地方即可。
頁面效果：
完整 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, Quill } from 'vue-quill-editor'
// 這里引入修改過的video模塊并注冊
import Video from './video'
Quill.register(Video, true)
// 設(shè)置title
import { setQuillTitle } from './quill-title.js'
// 工具欄
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: {
/* 編輯器的內(nèi)容 */
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 () {
// 初始給編輯器設(shè)置title
setQuillTitle()
},
methods: {
// 文本編輯
onEditorChange ({ quill, html, text }) {
console.log('editor changed:', quill, html, text)
console.log('html.replace(/<[^>]*>|/g:', html.replace(/<[^>]*>|/g))
this.$emit('update:content', html)
this.$emit('change', html)
},
hideLoading () {
this.loading = false
},
/** --------- 視頻上傳相關(guān) start --------- */
insertVideoLink (videoLink, poster) {
if (!videoLink) return this.$message.error('視頻地址不能為空！')
this.videoForm.show = false
let quill = this.$refs['myQuillEditor'].quill
// 獲取富文本
let range = quill.getSelection()
// 獲取光標位置：當編輯器中沒有輸入文本時，這里獲取到的 range 為 null
let index = range ? range.index : 0
// 沒有視頻默認封面時，設(shè)置默認視頻封面圖片
const img = poster ? poster : 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
// 在光標所在位置 插入視頻
quill.insertEmbed(index, 'video', {
url: videoLink,
poster: img
})
// 調(diào)整光標到最后
quill.setSelection(index + 1)
},
// el-文件上傳組件
onBeforeUploadVideo (file) {
this.loading = true
let acceptArr = ['video/mp4']
const isVideo = acceptArr.includes(file.type)
const isLt1M = file.size / 1024 / 1024 < this.uploadVideoConfig.maxSize
if (!isVideo) {
this.hideLoading()
this.$message.error('只能上傳mp4格式文件!')
}
if (!isLt1M) {
this.hideLoading()
this.$message.error(`上傳文件大小不能超過 ${this.uploadVideoConfig.maxSize}MB!`)
}
return isLt1M && isVideo
},
// 文件上傳成功時的鉤子
onSuccessVideo (res) {
this.hideLoading()
if (res.code === '100') {
this.insertVideoLink(res.url, res.cover)
} else {
this.$message.error(res.desc)
}
},
// 文件上傳失敗時的鉤子
onErrorVideo () {
this.hideLoading()
this.$message.error('上傳失敗')
},
/**--------- 視頻上傳相關(guān) end --------- */
}
}
</script>
<style lang='less'>
.rich-text-editor-container .ql-container {
height: 300px;
}
.rich-text-editor-container .ql-editor {
padding: 0;
}
.rich-text-editor-container .ql-tooltip {
left: 5px !important;
}
</style>完整 quill-video.js 代碼：
import { Quill } from "vue-quill-editor";
// 源碼中是import直接倒入，這里要用Quill.import引入
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')
const ATTRIBUTES = ['height', 'width']
class Video extends BlockEmbed {
static create (value) {
let node = super.create()
// 添加video標簽所需的屬性
node.setAttribute('controls', 'controls')
node.setAttribute('playsinline', 'true')
node.setAttribute('webkit-playsinline', 'true')
node.setAttribute('type', 'video/mp4')
// poster 屬性指定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。
node.setAttribute('poster', value.poster)
node.setAttribute('src', this.sanitize(value.url))
return node
}
static formats (domNode) {
return ATTRIBUTES.reduce((formats, attribute) => {
if (domNode.hasAttribute(attribute)) {
formats[attribute] = domNode.getAttribute(attribute)
}
return formats
}, {})
}
static sanitize (url) {
return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member
}
static value (domNode) {
// 設(shè)置自定義的屬性值
return {
url: domNode.getAttribute('src'),
poster: domNode.getAttribute('poster'),
}
}
format (name, value) {
if (ATTRIBUTES.indexOf(name) > -1) {
if (value) {
this.domNode.setAttribute(name, value)
} else {
this.domNode.removeAttribute(name)
}
} else {
super.format(name, value)
}
}
html () {
const { video } = this.value()
return `<a href="${video}" rel="external nofollow" rel="external nofollow" >${video}</a>`
}
}
Video.blotName = 'video' // 這里不用改，不用iframe，直接替換掉原來，如果需要也可以保留原來的，這里用個新的blot
Video.className = 'ql-video' // 可添加樣式，看實際使用需要
Video.tagName = 'video' // 用video標簽替換iframe
export default Video總結(jié)
到此這篇關(guān)于vue-quill-editor富文本編輯器上傳視頻功能詳解的文章就介紹到這了,更多相關(guān)vue-quill-editor富文本編輯器上傳視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue配置多代理服務接口地址操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文主要介紹在Vue中使用debouce防抖函數(shù)，設(shè)置一個門檻值，表示兩次?Ajax?通信的最小間隔時間。如果在間隔時間內(nèi)，發(fā)生新的keydown事件，則不觸發(fā)?Ajax?通信，并且重新開始計時。如果過了指定時間，沒有發(fā)生新的keydown事件再將數(shù)據(jù)發(fā)送出去，這便是debouce防抖函數(shù)2021-12-12
使用Vue構(gòu)建動態(tài)表單生成器的實現(xiàn)步驟
在前端開發(fā)中,表單是非常常見的交互元素,然而,當表單的結(jié)構(gòu)和字段需要根據(jù)不同的業(yè)務場景動態(tài)變化時,手動編寫每個表單的代碼會變得非常繁瑣,所以我們可以使用Vue實現(xiàn)一個動態(tài)表單生成器,本文將詳細介紹實現(xiàn)動態(tài)表單生成器的原理,需要的朋友可以參考下2025-04-04
這篇文章主要為大家詳細介紹了Vue-Quill-Editor富文本編輯器的使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
由于一些演示需要對一些簡單頁面進行配置,由于打包build后的vue項目基本已經(jīng)看不出原樣,因此需要創(chuàng)建一個文件,并在打包的時候不會進行編譯,所以文件放在public,這篇文章主要給大家介紹了關(guān)于vue引用public文件夾中文件的多種方式,需要的朋友可以參考下2024-02-02
ElementUI實現(xiàn)el-form表單重置功能按鈕
本文主要介紹了Element使用el-form時，點擊重置按鈕或者取消按鈕時會實現(xiàn)表單重置效果，具有一定的參考價值，感興趣的可以了解一下2021-07-07
今天小編就為大家分享一篇Vuejs2 + Webpack框架里,模擬下載的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue.js實現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動賦值、表單自動取值)
今天小編就為大家分享一篇Vue.js實現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動賦值、表單自動取值)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
在開發(fā)后臺管理系統(tǒng)的時候,很多地方都要用到導出excel表格,比如將table中的數(shù)據(jù)導出到本地,下面這篇文章主要給大家介紹了關(guān)于Vue導出Excel文件的相關(guān)資料,需要的朋友可以參考下2021-09-09
大家應該都知道父組件可以向子組件通過屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時隨意修改;但子組件不能修改父組件傳遞過來的參數(shù),所以下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值以及單向數(shù)據(jù)流問題的相關(guān)資料,需要的朋友可以參考下2021-09-09