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

在实际应用开发中，在常见的管理后台或者是多媒体管理后台，多多少少都会有富文本编辑器，而在编辑富文本时，通常的一个需求就是在富文本中插入图片或者视频，本篇文章讲述的就是在 Vue 项目中，使用 Vue-Quill-Editor 编辑器在富文本中插入视频。

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

vue-quill-editor 是 Vue 项目中使用的 富文本编辑器

1 引言

在实际应用开发中，在常见的管理后台或者是多媒体管理后台，多多少少都会有富文本编辑器，而在编辑富文本时，通常的一个需求就是在富文本中插入图片或者视频，本篇文章讲述的就是在 vue 项目中，使用 Vue-Quill-Editor 编辑器在富文本中插入视频。

官方的效果如下图 1 所示 点击这里查看 Vue-Quill-Editor 官方效果

图 1 在实际应用开发中，官方提供的效果往往满足不了我们的效果，而通过我们自定义样式后，达到如下的效果

图 2

2 一步步实现我们上面的效果

在实际项目中，我们有引用到 quill-editor 的地方，如这里写的

在 vue 中 ref 用来给元素或者子组件 注册引用信息，引用信息会注册在父组件的 refs 对象中，也就是说 我们可以通过 this.refs.editer 来获取当前 quill-editor 的实例

在这里 quill-editor 有一个配置信息 editorOption ，editorOption 是定义在 我们的 data() 中

  ...  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,在页面上显示插入视频链接地址的弹框

                
                                                添加                                请期待                  

在这里使用到的 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 中所示的效果。

阅读全文: http://gitbook.cn/gitchat/activity/5e531368abb3244dfe14af3d

您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ，阅读更多 GitChat 专享技术内容哦。