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() 中
<
在上述代码块中,通过 toolbar 来配置 quill-editor 编辑器的菜单栏 ,如这里配置的 ['image', 'video'] 在编辑器中如下显示 图3
通过在 handlers 配置 'video': function(value) 来自定义quill-editor 编辑器的菜单栏中的视频图标点击事件,在这里,当点击菜单栏的视频图标时,这里定义的方法监听到点击事件,然后将 标识 videoUploadTag 的值修改为 true,在页面上显示插入视频链接地址的弹框
<!--videoUploadTag 默认是 false -->
在这里使用到的 el-dialog、el-tabs、el-input 等等是 element ui框架点击这里查看element
当点击 添加按钮时会调用 addVideoLink() 方法 图4
在代码中 addVideoLink() 的定义如下
methods
最终我们实现了如图2中所示的效果。
完结