前端之家收集整理的这篇文章主要介绍了
vue富文本框（插入文本、图片、视频）的使用及问题小结，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
今天在vue里面插入富文本遇到了一些小坑在这里提供给大家用于参考，如有错误，望多加指正。
我这里使用的是Element-ui的上传图片组件
首先引入Element-ui(这个我就不作赘述了，详情参考element中文官网)
在引入富文本组件vue-quill-editor
使用在main.js引入相应的样式
现在就可以在vue中使用富文本
内容" :label-width="formLabelWidth">
这里需要注意的是editorOption是必须要配置的
其样式由于没有在modules配置工具拦所以它的出事显示就较为简洁
如果需要上传图片或者视频就需要对模块里面对工具栏进行改造重构(使用handlers)
配置好了过后会发现整个富文本编辑器的工具栏没有改变，还是只保留了几个基本的富文本功能。
这个是因为handlers是用来定义自定义程序的，而添加自定义处理程序就会覆盖它本省的工具栏和主体行为所以我们还要再自行配置下自己需要的工具栏，所有功能的配置如下，大家也可以按需配置
此时的文本工具就会丰富了
这样它的工具栏就会有上传图片和视频的接口，然后你就可以在工具拦的配置里的image和video里配置上传图片或视频，可以根据它的点击来给他相应的处理回应，也可以为其重新定向事件，这里我这里给大家介绍重新定向事件
首先定义一个上传组件，我这里用的是自己写好的上传 组件
import myUp from '@/page/test' //
上传组件
export default {
data() {
return {
value:'',// 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',}
}
}
},}
},methods: {
onEditorChange() {
console.log(this.value)
var conten = this.value
this.$emit('getText',conten)
}
}
}
