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

---

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);
       
      },

---

完结