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>

• 点赞
• 收藏
• 分享
• 文章举报