vue富⽂本框（插⼊⽂本、图⽚、视频）的使⽤今天在vue⾥⾯插⼊富⽂本遇到了⼀些⼩坑在这⾥提供给⼤家⽤于参考，如有错误，望多加指正。
我这⾥使⽤的是Element-ui的上传图⽚组件
⾸先引⼊Element-ui(这个我就不作赘述了，详情参考)
在引⼊富⽂本组件vue-quill-editor
使⽤在main.js引⼊相应的样式
import VueQuillEditor  from 'vue-quill-editor'
import 'quill/ss'
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);
}
},
}
}
}
配置好了过后会发现整个富⽂本编辑器的⼯具栏没有改变，还是只保留了⼏个基本的富⽂本功能。
这个是因为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
]
此时的⽂本⼯具就会丰富了
这样它的⼯具栏就会有上传图⽚和视频的接⼝，然后你就可以在⼯具拦的配置⾥的image和video⾥配置上传图⽚或视频，可以根据它的点击来给他相应的处理回应，也可以为其重新定向事件，这⾥我这⾥给⼤家介绍重新定向事件
⾸先定义⼀个上传组件，我这⾥⽤的是⾃⼰写好的上传 组件
<div class='avatar-uploader'>
<myUp v-on:getImgUrl='AddInputUrl'></myUp>
</div>
设置好相应属性值和事件
<script>
import myUp from '@/page/test' //上传组件
export default {
data() {
return {
value:'',
editorOption: {
placeholder: '请输⼊院校简介',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // ⼯具栏
handlers: {
'image': function(value){
if(value) {
/
/          console.log(this.serverUrl)
document.querySelector('.avatar-uploader').click()
//                                alert(1)
} else {
this.quill.format('image', false);
}
},
'video': function(value) {
if(value) {
alert(2)
} else {
this.quill.format('image', false);
}
},
}
}
}
},
}
},
methods: {
onEditorChange() {
console.log(this.value)
var conten = this.value
this.$emit('getText',conten)
}
}
}
</script>
这⾥需要注意的是如果想直接实现上传的话就需要在⼯具栏设置点击图⽚上传的时候⽤指针函数将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引⼊富⽂本的⼀点⼩理解，希望⼤家多多指点哦