通过自定义quill图片上传按钮,实现将图片上传服务器,并插入服务器地址。
<template>
<div ref="editor"></div>
</template>
<script>
export default {
name: "editor",
props: ['content'],
data() {
return {
_content: '',
}
},
watch: {
// 监听父组件传递的content值,变化后更新富文本内容
content(newVal, oldVal) {
if (this.quill) {
if (newVal && newVal !== this._content) {
this._content = newVal;
this.quill.clipboard.dangerouslyPasteHTML(newVal);
} else if(!newVal) {
this.quill.setText('');
}
}
}
},
methods: {
uploadToServer(file, callback) {
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('upload', file);
xhr.open('post', this.$ajax.defaults.baseURL + '/upload/blogUpload');
xhr.withCredentials = true;
xhr.responseType = 'json';
xhr.send(formData);
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.response);
}
};
}
},
mounted() {
// 初始化quill
this.quill = new Quill(this.$refs.editor, {
theme: 'snow',
modules: {
history: {
userOnly: true
},
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
['clean'],
['link', 'image', 'video']
],
syntax: true
}
});
// 自定义图片上传
var toolbar = this.quill.getModule('toolbar');
toolbar.addHandler('image', () => {
var fileInput = toolbar.container.querySelector('input.ql-image[type=file]');
if (fileInput == null) {
fileInput = document.createElement('input');
fileInput.setAttribute('type', 'file');
fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
fileInput.classList.add('ql-image');
fileInput.addEventListener('change', () => {
if (fileInput.files != null && fileInput.files[0] != null) {
this.uploadToServer(fileInput.files[0], (res) => {
var range = this.quill.getSelection();
if (range) {
fileInput.value = null;
// 在当前光标位置插入图片
toolbar.quill.insertEmbed(range.index, 'image', this.$ajax.defaults.baseURL + res.file.path);
// 将光标移动到图片后面
toolbar.quill.setSelection(range.index + 1);
}
});
}
});
toolbar.container.appendChild(fileInput);
}
fileInput.click();
});
// 监听富文本变化,更新父组件数据
this.quill.on('text-change', () => {
let html = this.$refs.editor.children[0].innerHTML;
if (html === '<p><br></p>') html = '';
this._content = html;
this.$emit('edit', this._content);
});
}
}
</script>
<style>
.ql-snow .ql-editor pre.ql-syntax {
background-color: #282c34;
color: #abb2bf;
}
</style>
这里面只需要关注自定义图片上传部分即可。
this.$ajax.defaults.baseURL是配置的axios的baseurl,因为我要在本地和线上地址来回切换。
不用太在意,插入自己服务器返回的实际地址就行。