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);

<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>

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);
     }
    },
    }
   }
   }

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
 ]

<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>

AddInputUrl(data) {
  var a = data
  var tp = a.length
  var imghz = a.slice(tp - 4, tp)
  var src = 'src="/UploadFiles/2021-04-02/' + a + '">

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


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


总结
以上所述是小编给大家介绍的vue富文本框（插入文本、图片、视频）的使用及问题小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！