题记：
----- 互联网不该只是技术的，不能简化成内容和工具，它应该属于生活本身
vue-quill-editor 是 Vue 项目中使用的 富文本编辑器
1 引言
在实际应用开发中，在常见的管理后台或者是多媒体管理后台，多多少少都会有富文本编辑器，而在编辑富文本时，通常的一个需求就是在富文本中插入图片或者视频，本篇文章讲述的就是在 vue 项目中，使用 Vue-Quill-Editor 编辑器在富文本中插入视频。
官方的效果如下图1所示 点击这里查看Vue-Quill-Editor官方效果
图1
在实际应用开发中，官方提供的效果往往满足不了我们的效果，而通过我们自定义样式后，达到如下的效果
图2
2 一步步实现我们上面的效果
在实际项目中，我们有引用到 quill-editor 的地方，如这里写的
<quill-editor class="editer"
ref="editer"
v-model="dataForm.content"
:options="editorOption"
style="height: 500px;">
</quill-editor>
在 vue 中 ref 用来给元素或者子组件 注册引用信息，引用信息会注册在父组件的 refs对象中，也就是说 我们可以通过 this.refs.editer 来获取当前 quill-editor 的实例
在这里 quill-editor 有一个配置信息 editorOption ，editorOption 是定义在 我们的 data() 中
<script>
...
export default {
data() {
var self2 = this;
return {
//显示插入视频链接弹框的标识
videoUploadTag: false,
//弹框插入的视频链接记录
videoLink:"",
//quill-editor 编辑器的配置
editorOption: {
modules: {
toolbar: {
container: [
...
['image', 'video']
],
handlers: {
...
'video': function(value) {
self2.videoUploadTag = true;
}
}
}
}
},
}
在上述代码块中，通过 toolbar 来配置 quill-editor 编辑器的菜单栏 ，如这里配置的 [‘image’, ‘video’] 在编辑器中如下显示 图3
通过在 handlers 配置 ‘video’: function(value) 来自定义quill-editor 编辑器的菜单栏中的视频图标点击事件，在这里，当点击菜单栏的视频图标时，这里定义的方法监听到点击事件，然后将 标识 videoUploadTag 的值修改为 true,在页面上显示插入视频链接地址的弹框
<!--videoUploadTag 默认是 false -->
<!--所以这里的上传弹框是隐藏的 -->
<!--当点击编辑器菜单栏中的视频图标时，将videoUploadTag 修改为 true 在页面上显示出来插入视频的弹框-->
<div :visible.sync="videoUploadTag">
<el-dialog
width="50%"
id="video_upload"
style="margin-top: 1px"
title="视频上传"
:visible.sync="videoUploadTag"
append-to-body>
<el-tabs v-model="activeName" @tab-click="videoSelectTagClick" value="0">
<el-tab-pane label="添加视频链接" name="first">
<el-input v-model="videoLink" placeholder="请输入视频链接" clearable></el-input>
<el-button type="primary" size="small" style="margin: 20px 0px 0px 0px " @click="addVideoLink()">添加
</el-button>
</el-tab-pane>
<el-tab-pane label="素材库" name="second">请期待</el-tab-pane>
</el-tabs>
</el-dialog>
</div>
在这里使用到的 el-dialog、el-tabs、el-input 等等是 element ui框架点击这里查看element
当点击 添加按钮时会调用 addVideoLink() 方法 图4
在代码中 addVideoLink() 的定义如下
methods: {
addVideoLink() {
if (this.videoLink.length == 0) {
alert('请输入视频链接');
}
//当编辑器中没有输入文本时，这里获取到的 range 为 null
var range = this.$refs.editer.quill.getSelection();
//视频插入在富文本中的位置
var index = 0;
if (range == null) {
index = 0;
} else {
index = range.index;
}
//隐藏弹框
this.videoUploadTag = false;
//将视频链接插入到当前的富文本当中
this.$refs.editer.quill.insertEmbed(index, 'video', this.videoLink);
},
}
最终我们实现了如图2中所示的效果。
3 嵌入分享视频代码
使用 哔哩哔哩 或者腾讯视频 中的分享中的嵌入代码，如下图中，在所有的视频播放平台，点击分享，分有视频地址或者是嵌入代码
复制出的代码格式如下：
<iframe src="//player.bilibili.com/player.html?aid=96182767&bvid=BV1zE411V7Th&cid=164196534&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
在这里 我们使用的是嵌入代码，如在我们的编辑器中
vue 中
//在点击添加的时候调用函数
addVideoCodeLink() {
console.log('输入的内容');
///这里的 videoCodeLink 是绑定的输入框内的变量
if (this.videoCodeLink.length === 0) {
alert('请输入视频链接');
return;
} else {
console.log(this.videoCodeLink);
}
///获取编辑器中光标的位置
var selectionQuill = this.$refs.editer.quill.getSelection();
var index = 0;
///当编辑器中没有内容时，这里获取的 selectionQuill 为 null
if(selectionQuill !== null){
index = selectionQuill.index;
}
///以引号分隔嵌入的视频代码 如下图中有分析
var list = this.videoCodeLink.split('"');
///取出src中的视频独家报道
var item = list[1];
///将视频链接插入到编辑器中
this.$refs.editer.quill.insertEmbed(index, 'video', item);
},
完结
转载：https://blog.csdn.net/zl18603543572/article/details/104468690