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-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中所示的效果。

---

完结