設置富文本參數

// 富文本框參數設置editorOption: {modules: {ImageExtend: {loading: false,name: 'file',action: UPLOAD_URL + '?path=edit.image',//網絡請求地址// response: ({ url }) => getImgPath(url),response: (res) => {//請求到的內容里面有url localhost:80/edit/image/1660723565030Product后端返回的const a = res.url.slice(13)//截取掉沒有用的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自帶的獲取光標位置console.log(range)//{index:'當前光標位置'，length:'0'}//由于我這里不知道為啥一直獲取到光標位置一直是0導致視頻一直插入第一位置,所以在data定義了一個indexVideo =0// let indexVideo = 0// if (range == null) {// indexVideo = 0//} else {//indexVideo = range.index//}this.indexVideo 的數據從聚焦事件中獲取// onEditorFocus(quill) {//this.indexVideo = quill.selection.lastRange.index//console.log('editor focus!聚焦', quill.selection.lastRange)//console.log(this.$refs.myQuillEditor)},//但是后面經過測試可以發現如果一進入就開始操作插入圖片視頻步驟的話會報錯TypeError: Cannot read properties of undefined (reading 'children')譯為:// 無法讀取undefined的屬性(正在讀取'children') 是因為加載時無法及時獲取到quilll無法獲取到所以下一步無法繼續進行//可以將這一步放到mounted中也可以取巧通過 // onEditorChange({ quill, html, text }) {// this.quilll = quill//通過賦值來獲取不收影響// console.log('editor change!書寫時觸發', quill, html, text)// this.content = html},quilll.insertEmbed(this.indexVideo, 'video', getImgPath(a))//修改標簽quilll.insertEmbed（光標位置，標簽名稱，src路徑）} else {// 插入圖片}this.imgURL.push(getImgPath(a))return getImgPath(a)},headers: (xhr) => {//設置請求頭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) {//開啟后點擊上傳視頻將不在使用鏈接而是和圖片一樣直接調用本地文件// // 劫持原來的視頻點擊按鈕事件// QuillWatch.emit(this.quill.id)// }}}},placeholder: '請輸入詳情內容...'},

引入

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。