vue富文本框（插入文本、图片、视频）的使用及问题小结

时间:2020-05-16 谭少居然人气:0

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

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

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

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

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

import VueQuillEditor from 'vue-quill-editor'
import 'quillhttps://img.qb5200.com/download-x/dist/quill.core.css'
import 'quillhttps://img.qb5200.com/download-x/dist/quill.snow.css'
import 'quillhttps://img.qb5200.com/download-x/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富文本框（插入文本、图片、视频）的使用及问题小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

加载全部内容