quill上传本地视频（保姆级教学）

设置富文本参数

     // 富文本框参数设置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上传本地视频（保姆级教学）相关推荐

wangeditor上传本地视频的方法
在官方版本的上传视频功能里,是不支持上传本地视频的,如果需要实现上传本地视频文件,可以自己定义一个上传方法. 实现思路: 1.使用input -> type="file",将 ...
qq空间上传html,qq空间怎么上传本地视频两种上传方式(说说/日志)
首先打开QQ空间,我们有两种上传本地视频到QQ空间的方式, 第一种是说说上传,第二种是日志上传. 先来说第一种, 以上是我们打开qq空间以后,里面说说界面,后面有一组类似冒号的东西,把鼠标移至那里,然 ...
C# Umeditor 编辑器上传本地视频、本地文件
Umeditor 最近在做一个网站,涉及到网站文章的编辑.Umeditor是一个很好的选择,但是看了一下Umeditor,发现不能上传本地视频和本地文件,而项目又要得比较急,所以以我觉得最快的方式修改 ...
wangEditor上传本地视频
wangEditor是一个轻量级web富文本编辑器,一般可以满足用户需求,但是有特殊要求的可以对其进行修改源文件是上传Html视频格式,如果想要变成上传本地视频需要做以下修改: /*上传视频*/// ...
tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
PHP怎么做成Qq空间相册,qq空间如何上传本地视频相片制作视频传到QQ空间
相信很多网友都有上传QQ空间照片的喜好,我就是其中一个,拍了一张漂亮的PP,恨不得马上传到空间,炫耀一番.上传的照片日积月累,越来越多.平常要一张张的观看照片挺费时.最近学了一个新招,可以使用狸窝照片 ...
wangeditor富文本编辑器添加上传本地视频功能
wangeditor.js全部代码(可选择复制) (function (global, factory) {typeof exports === 'object' && typeof ...
tinymce编辑器上传本地视频预览
小白一枚,最近搞搞tinymce编辑器上传视频预览,视频标签变成了图片标签问题,看看之前其他博主的说明,感jio好麻烦,官网的也没整明白,所以自己瞎整整.勿喷!勿喷!勿喷!重要事情说三遍首先是在ti ...
记录：使用阿里云视频点播Vod实现上传本地视频
1.导入Maven依赖 <dependencies><dependency><groupId>com.aliyun</groupId><artif ...

quill上传本地视频（保姆级教学）

设置富文本参数

引入

video.js文件内容

quill上传本地视频（保姆级教学）相关推荐

最新文章

热门文章