vue-quill-editor 自定义上传图片

基本运用  https://www.geek-share.com/detail/2731906849.html

自带的上传图片 是转base64  现在需要就图片上传到服务器 使用url地址

1. npm 安装 vue-quill-editor 

2. import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

3.

[code]<template>
<div style="text-align: left">
<button @click="browse">浏览</button>
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
<form id="upload" class="hidden" enctype="multipart/form-data" method="post">     <!--用来上传图片-->
<input type="file" name="image" id="selectImg" accept="image/gif, image/jpeg, image/png" @change="inputChangeImg"
multiple/>
<input type="button" value="提交" @click="uploadPic"/>
</form>
</div>
</template>

<script>
// 工具栏配置
import {utils} from "../../../js/utils";
import {api} from "../../../js/api";
//vue-quill-edito的配置
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
]
export default {
name: "notice_editor",
data() {
return {
content: null,
openImgUrl:'',
editorOption: {
modules: {
toolbar: {
container: toolbarOptions,  // 工具栏
handlers: {
'image': function (value) {
if (value) {
// alert('自定义图片')
document.getElementById("selectImg").click();    //调用选择图片
} else {
this.quill.format('image', false);
}
}
}
}
}
}
}
},
methods: {
browse:function(){
this.$emit('showChildPage',{title: "通知预览", name: "frm_notice_browse"},this.content)
},
onEditorBlur() {//失去焦点事件
console.log(this.content);   //富文本编辑器中的内容
},
onEditorFocus() {//获得焦点事件
},
onEditorChange() {//内容改变事件
},
selectImg() {  //选择图片
document.getElementById("selectImg").click();
},
inputChangeImg: function () { // input 选择图片时的操作
let that = this;
let input = document.getElementById('selectImg');
if (input.files && input.files[0]) {
let item = input.files[0];
let reader = new FileReader();
reader.onload = function (e) {
that.uploadPic().then(res => {   //上传图片到服务器
console.log(res);
that.handleSuccess(res)
}).catch(err => {
console.log(err);
});
};
reader.readAsDataURL(item);
}
},
handleSuccess (res) {
let quill = this.$refs.myQuillEditor.quill
let length = quill.getSelection().index;    // 获取光标所在位置
quill.insertEmbed(length, 'image', res.url);   // 插入图片  res.url为服务器返回的图片地址
quill.setSelection(length + 1);              // 调整光标到最后
},
uploadPic: function () {  //提交图片
let form = document.getElementById('upload'),
formData = new FormData(form);
return api.uploadFile({url: api.API_UPLOAD_IMAGES, data: formData})

}
}
}
</script>

<style scoped>

</style>