設(shè)置富文本參數(shù)

// 富文本框參數(shù)設(shè)置editorOption: {modules: {ImageExtend: {loading: false,name: 'file',action: UPLOAD_URL + '?path=edit.image',//網(wǎng)絡(luò)請(qǐng)求地址// response: ({ url }) => getImgPath(url),response: (res) => {//請(qǐng)求到的內(nèi)容里面有url localhost:80/edit/image/1660723565030Product后端返回的const a = res.url.slice(13)//截取掉沒(méi)有用的localhost:80console.log(a)///edit/image/1660723565030Product***.jpgconst b = a.slice(a.length - 3)//截取后三位看看是什么格式的console.log(b, a)if (b === 'mp4') {//如果是mp4視頻格式// 修改為視頻var quilll = this.$refs.myQuillEditor.quill//quill自帶的var range = this.$refs.myQuillEditor.quill.getSelection()//quill自帶的獲取光標(biāo)位置console.log(range)//{index:'當(dāng)前光標(biāo)位置'，length:'0'}//由于我這里不知道為啥一直獲取到光標(biāo)位置一直是0導(dǎo)致視頻一直插入第一位置,所以在data定義了一個(gè)indexVideo =0// let indexVideo = 0// if (range == null) {// indexVideo = 0//} else {//indexVideo = range.index//}this.indexVideo 的數(shù)據(jù)從聚焦事件中獲取// onEditorFocus(quill) {//this.indexVideo = quill.selection.lastRange.index//console.log('editor focus!聚焦', quill.selection.lastRange)//console.log(this.$refs.myQuillEditor)},//但是后面經(jīng)過(guò)測(cè)試可以發(fā)現(xiàn)如果一進(jìn)入就開始操作插入圖片視頻步驟的話會(huì)報(bào)錯(cuò)TypeError: Cannot read properties of undefined (reading 'children')譯為:// 無(wú)法讀取undefined的屬性(正在讀取'children') 是因?yàn)榧虞d時(shí)無(wú)法及時(shí)獲取到quilll無(wú)法獲取到所以下一步無(wú)法繼續(xù)進(jìn)行//可以將這一步放到mounted中也可以取巧通過(guò) // onEditorChange({ quill, html, text }) {// this.quilll = quill//通過(guò)賦值來(lái)獲取不收影響// console.log('editor change!書寫時(shí)觸發(fā)', quill, html, text)// this.content = html},quilll.insertEmbed(this.indexVideo, 'video', getImgPath(a))//修改標(biāo)簽quilll.insertEmbed（光標(biāo)位置，標(biāo)簽名稱，src路徑）} else {// 插入圖片}this.imgURL.push(getImgPath(a))return getImgPath(a)},headers: (xhr) => {//設(shè)置請(qǐng)求頭xhr.setRequestHeader('token', getToken())xhr.setRequestHeader('Auth', authConfig(UPLOAD_URL + '?path=edit.image', 'POST', getToken()))}},toolbar: {container,handlers: {image: function() {QuillWatch.emit(this.quill.id)}// video: function(val) {//開啟后點(diǎn)擊上傳視頻將不在使用鏈接而是和圖片一樣直接調(diào)用本地文件// // 劫持原來(lái)的視頻點(diǎn)擊按鈕事件// QuillWatch.emit(this.quill.id)// }}}},placeholder: '請(qǐng)輸入詳情內(nèi)容...'},

引入

import Video from './video' Quill.register(Video, true) import { quillEditor, Quill } from 'vue-quill-editor'

video.js文件內(nèi)容

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標(biāo)簽所需的屬性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}">${video}</a>`} } Video.blotName = 'video' // 不用iframe，直接替換掉原來(lái)，如果需要也可以保留原來(lái)的，這里用個(gè)新的blot Video.className = 'ql-video' Video.tagName = 'video' // 用video標(biāo)簽替換iframe export default Video

總結(jié)

以上是生活随笔為你收集整理的quill上传本地视频（保姆级教学）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。