vue2 quill 视频上传 ，基于ruoyi vue,oss
包含两种上传方式，第一种点开弹新页面可选url和点击上传。本文中是第二种，自己拼的。像点击上传图片一样，直接传video文件，原创不易，纯纯踩坑；
因为现阶段能搜索到的内容，99.5%都是一样的内容，无法满足需求。
我的需求是在ruoyi-vue里面用quill富文本，但里面一部分功能没有。
但作者给了自定义插件通道。
如果根据我的代码去写，上传完视频 就拿不到光标，只能拿到最后一个字的长度，因此上传视频被提成bug。
自猜：点击完tag的上传视频 是打开个子页面，父子页面传值可能存在问题。
无奈之下只能自己手拼。看代码吧。如有问题请及时指正。
所有代码在同级目录下
贴代码
index.vue
letterSpacing.js
import Quill from 'quill'
let Parchment = Quill.import('parchment')
// 字符间距
class letterSpacingAttributor extends Parchment.Attributor.Style {}
const letterSpacingStyle = new letterSpacingAttributor(
'letter-spacing',
'letterSpacing',
{
scope: Parchment.Scope.INLINE,
whitelist: [
'initial',
'2px',
'4px',
'6px',
'8px',
'10px',
'12px',
'14px',
'16px',
],
}
)
export { letterSpacingStyle }
lineHeight.js
import Quill from 'quill'
let Parchment = Quill.import('parchment')
// 行高
class lineHeightAttributor extends Parchment.Attributor.Style {}
const lineHeightStyle = new lineHeightAttributor(
// 'line-height', 'lineHeight',
// 'lineheight', 'ql-lineheight',
'lineheight', 'line-height',
// 'line-height','lineheight',
{
scope: Parchment.Scope.INLINE,
whitelist: ['initial', '1', '2', '3', '4', '5','20'],
})
export { lineHeightStyle }
quill-title.js
const titleConfig = {
'ql-bold': '加粗',
'ql-color': '颜色',
'ql-font': '字体',
'ql-code': '插入代码',
'ql-italic': '斜体',
'ql-link': '添加链接',
'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': '清除字体样式',
'ql-lineheight': '行高',
'ql-letterSpacing': '字符间距',
}
export function addQuillTitle() {
const oToolBar = document.querySelector('.ql-toolbar'),
aButton = oToolBar.querySelectorAll('button'),
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.classList[0]]
}
})
aSelect.forEach(function (item) {
item.parentNode.title = titleConfig[item.classList[0]]
})
}
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));
//为了兼容 iOS 设备上，显示海报图（视频封面）
node.setAttribute("preload", "metadata");
// node.setAttribute("poster", value.poster);
node.setAttribute("webkit-playsinline", "true");
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");
// 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 `${video}`;
}
}
Video.blotName = "video";
Video.className = "ql-video";
Video.tagName = "video"; // 用video标签替换iframe
export default Video;