vue中富文本编辑器vue-quill-editor在vue中自定义选择视频插入编辑文章中

题记：
----- 互联网不该只是技术的，不能简化成内容和工具，它应该属于生活本身

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-dialogwidth="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 为 nullvar 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 为 nullif(selectionQuill !== null){index = selectionQuill.index;}///以引号分隔嵌入的视频代码 如下图中有分析var list = this.videoCodeLink.split('"');///取出src中的视频独家报道var item = list[1];///将视频链接插入到编辑器中this.$refs.editer.quill.insertEmbed(index, 'video', item);},

完结