vue富文本框（插入文本、图片、视频）的使用

朴灿烈づ我的快乐病毒、 2022-05-16 05:13 369阅读 0赞

今天在vue里面插入富文本遇到了一些小坑在这里提供给大家用于参考，如有错误，望多加指正。

我这里使用的是Element-ui的上传图片组件

首先引入Element-ui(这个我就不作赘述了，详情参考[element中文官网][element])

在引入富文本组件vue-quill-editor

使用在main.js引入相应的样式

import VueQuillEditor  from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
     
    Vue.use(VueQuillEditor);

现在就可以在vue中使用富文本

<template>
    
    				<el-form-item label="内容" :label-width="formLabelWidth">
    					<quill-editor v-model="value" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)">
    					</quill-editor>
    				</el-form-item>
    </template>
    <script>
    export default {
    		data() {
    			return {
                    value:'',
    				editorOption: {
    					placeholder: '请输入院校简介',
    					theme: 'snow',
    					modules: {}
    				}
                },
            methods: {
                onEditorChange() {
    				console.log(this.value)
    			}
            }
    }
    </script>

这里需要注意的是editorOption是必须要配置的

其样式由于没有在modules配置工具拦所以它的初始显示就较为简洁

如果需要上传图片或者视频就需要对模块里面对工具栏进行改造重构(使用handlers)

modules: {
    						toolbar: {
    							handlers: {
                                    container: toolbarOptions,  // 工具栏
    								'image': function(value) {
    									if(value) {
    										alert(1)
    									} else {
    										this.quill.format('image', false);
    									}
    								},
    								'video': function(value) {
    									if(value) {
    										alert(2)
    									} else {
    										this.quill.format('image', false);
    									}
    								},
    							}
    						}
    					}

配置好了过后会发现整个富文本编辑器的工具栏没有改变，还是只保留了几个基本的富文本功能。

![70][]

这个是因为handlers是用来定义自定义程序的，而添加自定义处理程序就会覆盖它本省的工具栏和主体行为所以我们还要再自行配置下自己需要的工具栏，所有功能的配置如下，大家也可以按需配置

const toolbarOptions = [
    		['bold', 'italic', 'underline', 'strike'], // toggled buttons
    		['blockquote', 'code-block'],
    
    		[{
    			'header': 1
    		}, {
    			'header': 2
    		}], // custom button values
    		[{
    			'list': 'ordered'
    		}, {
    			'list': 'bullet'
    		}],
    		[{
    			'script': 'sub'
    		}, {
    			'script': 'super'
    		}], // superscript/subscript
    		[{
    			'indent': '-1'
    		}, {
    			'indent': '+1'
    		}], // outdent/indent
    		[{
    			'direction': 'rtl'
    		}], // text direction
    
    		[{
    			'size': ['small', false, 'large', 'huge']
    		}], // custom dropdown
    		[{
    			'header': [1, 2, 3, 4, 5, 6, false]
    		}],
    
    		[{
    			'color': []
    		}, {
    			'background': []
    		}], // dropdown with defaults from theme
    		[{
    			'font': []
    		}],
    		[{
    			'align': []
    		}],
    		['link', 'image', 'video'],
    		['clean'] // remove formatting button
    	]

此时的文本工具就会丰富了

![70 1][]

这样它的工具栏就会有上传图片和视频的接口，然后你就可以在工具拦的配置里的image和video里配置上传图片或视频，可以根据它的点击来给他相应的处理回应，也可以为其重新定向事件，这里我这里给大家介绍重新定向事件

首先定义一个上传组件，我这里用的是自己写好的上传 组件

设置好相应属性值和事件

这里需要注意的是如果想直接实现上传的话就需要在工具栏设置点击图片上传的时候用指针函数将this锁定再做其他操作

由于我是自己写的上传所以要插入到富文本内部所以添加内容的时候需要加入img标签，因为富文本内部是支持图片的解析的

AddInputUrl(data) {
    				var a = data
    				var tp = a.length
    				var imghz = a.slice(tp - 4, tp)
    				var src = 'src="' + a + '"'
    				var bq = "<img " + src + " alt='' />"
    				this.value += bq
    }

做到这里一个支持上传图片的富文本就做好了，再来说下视频，由于引入的富文本绝大多数都是没有内置的播放器所以video标签在富文本里面会失效，在这里我就选择直接用iframe标签

var bq='<iframe frameborder="0" width="100%" height="40%" '+ src+' allowfullscreen></iframe>'
    this.value += bq

以上就是我对vue引入富文本的一点小理解，希望大家多多指点哦

[element]: http://element-cn.eleme.io/#/zh-CN/component/installation
[70]: /images/20220516/c3a5a58727a84cceb8a6e4ec18dc3623.png
[70 1]: /images/20220516/6ee0a0e0a45548c080ed6317e581b0fa.png