ant-design-vue富文本组件代码

<template>

      <quill-editor

        ref="myQuillEditor"

        v-model="content"

        :options="editorOption"

        @blur="onEditorBlur($event)"

        @focus="onEditorFocus($event)"

        @ready="onEditorReady($event)"

    />

</template>

<script>

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

import Vue from 'vue'

import { quillEditor } from 'vue-quill-editor'

const uploadConfig = {

    methods:'POST',//必填参数，图片上传方式

    token:'',//可选参数，如果需要token验证，假设你的token存放在sessionStorage

    name:'file',//必填参数，文件的参数名

    size:700,//可选参数，图片大小，单位为kb,1M=1024kb

    accept:'image/png,image/gif,image/jpeg,image/bmp,image/x-icon',//可选

    type:'audio/mp4,video/mp4'

}

//toolbar工具栏的工具选项(默认展示全部)

const toolOptions = [

    ['bold','italic','underline','strike'],

    ['blockquote','code-block'],

    [{header:1},{header:2}],

    [{list:'ordered'},{list:'bullet'}],

    [{script:'sub'},{script:'super'}],

    [{indent:'-1'},{indent:'+1'}],

    [{direction:'rtl'}],

    [{size:['small',false,'large','huge']}],

    [{header:[1,2,3,4,5,6,false]}],

    [{color:[]},{background:[]}],

    [{font:[]}],

    [{align:[]}],

    ['clean'],

    ['link','image','video']

]

function uploadFilePic(quill,files,index){

    //创建formData

    var formData = new FormData()

    formData.append(uploadConfig.name,files[index])

    //如果需要token且存在token

    if(uploadConfig.token){

        formData.append('token',uploadConfig.token)

    }

    Vue.axios.post('/api/File/Upload',formData).then(response=>{

        console.log('upload response:',response);

        let url = response.Path

        let length = quill.getSelection().index

        quill.insertEmbed(length,'image',url)

        quill.setSelection(length+1)

        index+=1

        if(index<files.length){

            uploadFilePic(quill,files,index)

        }

    })

}

const handlers = {

    //配置上传图片

    image:function image(){

        var self = this

        var fileInput = this.container.querySSelector('input.ql-image[type=file]')

        if(fileInput===null){

            fileInput = document.createElement('input')

            fileInput.setAttribute('type','file')

            //设置图片参数名

            if(uploadConfig.name){

                fileInput.setAttribute('name',uploadConfig.name)

            }

            //可设置上传图片的格式

            fileInput.setAttribute('accept',uploadConfig.accept)

            fileInput.setAttribute('multiple','multiple')

            fileInput.classList.add('ql-image')

            //监听选择文件

            fileInput.addEventListener('change',function(){

                if(fileInput.files.length===0){

                    return;

                }

                uploadFilePic(self.quill,fileInput.files,0)

            })

            this.container.appendChild(fileInput)

        }

        fileInput.click();

    },

    //配置上传视频

    video:function(){

        var self = this

        var fileInput = this.container.querySelector('input.ql-video[type=file]')

        if(fileInput===null){

            fileInput = document.createElement('input')

            fileInput.setAttribute('type','file')

            if(uploadConfig.name){

                fileInput.setAttribute('name',uploadConfig.name)

            }

            fileInput.setAttribute('accept',uploadConfig.type)

            fileInput.classList.add('ql-video')

            fileInput.addEventListener('change',function(){

                if(fileInput.files.length===0){

                    return;

                }

                var formData = new FormData()

                formData.append(uploadConfig.name,fileInput.files[0])

                if(uploadConfig.token){

                    formData.append('token',uploadConfig.token)

                }

                Vue.axios.post('/api/File/Upload',formData).then(response=>{

                    console.log('upload response:',response)

                    let url = response.Path

                    let length = self.quill.getSelection().index

                    self.quill.insertEmbed(length,'video',url);

                })

            })

            this.container.appendChild(fileInput)

        }

        fileInput.click()

    }

}

export default {

name: 'RichTextModal',

  placeholder:'',

    theme:'snow',//主题

    modules:{

        toolbar:{

            container:toolOptions,//工具栏选项

            handlers:handlers,//事件重写

        }

    },

  components: { quillEditor },

  data () {

      return {

        // 富文本编辑器默认内容

        content: '<h2>I am Example</h2>',

        //富文本编辑器配置

        editorOption: {

          // Some Quill options...

        }

      }

    },

    methods: {

      //失去焦点事件

      onEditorBlur(quill) {

        console.log('editor blur!', quill)

      },

      //获得焦点事件

      onEditorFocus(quill) {

        console.log('editor focus!', quill)

      },

      // 准备富文本编辑器

      onEditorReady(quill) {

        console.log('editor ready!', quill)

      },

      //内容改变事件

      onEditorChange({ quill, html, text }) {

        console.log('editor change!', quill, html, text)

        this.content = html

      }

    }

}

</script>

<style scoped>

</style>