vue项目中使用富文本编辑器处理图片上传问题

暂未更新完毕，明天再更。。。

背景：项目中的后台数据库不支持base64传输数据，主要是因为字符太长，不支持，所以这里需要借助element-ui中的el-upload作为上传的入口。

一、插件的基本使用

1.安装依赖包

npm install vue-quill-editor --save

2.在vue项目的src下的main.js文件中引入以下代码

import Vue from 'vue'
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)

3.页面的具体使用

<template>
    <div>
         <quillEditor  v-model="content"
               :options="editorOption" 
               @blur="onEditorBlur($event)" 
               @focus="onEditorFocus($event)"
               @change="onEditorChange($event)">
         </quillEditor>
   </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
export default {
        data:function(){
            return{
                content:'',
                editorOption:{}
            }
        },
        methods:{
            onEditorBlur(editor){//失去焦点事件    
 	    },
            onEditorFocus(editor){//获得焦点事件
            },
            onEditorChange({editor,html,text}){ //富文本内容发生变化时，参数这里是结构赋值
                //this.content可以实时获取到当前编辑器内的文本内容
                console.log(this.content);
            }
        }
}

</script>