html
<div :class="prefixCls">
<quill-editor
v-show="visible"
@focus="focus($event)"
v-model="queryParam.content"
ref="myQuillEditor"
:options="editorOption"
@change="onEditorChange($event)">
</quill-editor>
<input
type="file"
accept=".png,.jpg,.jpeg"
@change="change"
id="upload"
style="display:none"
>
</div>
script
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor, Quill } from 'vue-quill-editor'
export default {
name: 'QuillEditor',
components: {
quillEditor
},
props: {
prefixCls: {
type: String,
default: 'ant-editor-quill'
},
// 表单校验用字段
// eslint-disable-next-line
value: {
type: String
}
},
data () {
return {
// 标题是否禁用
Title: false,
// 编号是否禁用
umber: false,
submitd: true,
resetd: true,
visible: false,
content: null,
editorOption: {
placeholder: '编辑文章内容',
theme: 'snow',
modules: {
ImageExtend: {
loading: true,
name: 'pictureFile',
size: 6,
start: () => {},
end: () => {},
error: () => {},
change: (xhr, formData) => {}
},
toolbar: {
container: container,
// 拦截
handlers: {
image: function (value) {
if (value) {
document.querySelector('#upload').click()// 劫持原来的图片点击按钮事件
}
}
}
}
}
}
}
},
computed: {
...mapGetters(['department'])
},
methods: {
login () {
this.visible = true
this.submitd = true
this.resetd = true
},
// 获取焦点事件
focus (event) {
// 设置富文本编辑器不可编辑
if (this.umber === true) {
event.enable(false)
}
},
show (e) {
this.visible = true
this.queryParam.title = e.title
this.queryParam.number = e.number
this.queryParam.content = e.content
this.submitd = false
this.resetd = false
this.umber = true
this.Title = true
},
onEditorChange ({ quill, html, text }) {
this.queryParam.content = html
},
submit () {
addMessageList({
title: this.queryParam.title,
content: this.queryParam.content,
number: this.queryParam.number,
department: this.department
}).then(res => {
this.$message.success('上传成功')
this.visible = false
this.queryParam.content = ''
}).catch((err) => {
this.$message.error(err.msg)
})
},
// 拦截
change (e) {
const file = e.target.files[0]
const formData = new FormData()
// console.log(formData)
formData.append('userfile', file)
messageLoad(formData)
.then((res) => {
const quill = this.$refs.myQuillEditor.quill
if (res === '上传成功') {
const length = quill.getSelection().index // 光标位置
// 插入图片 图片地址
const imgurl = `http://网址:端口号/messagefiles/` + e.target.files[0].name
quill.insertEmbed(length, 'image', imgurl)
// 调整光标到最后
quill.setSelection(length + 1) // 光标后移一位
}
})
.catch((err) => {
console.error(err)
})
},
handleCancel () {
this.visible = false
this.queryParam.title = ''
this.queryParam.number = ''
this.queryParam.content = ''
this.umber = false
this.Title = false
},
// 重置
reset () {
this.queryParam.title = ''
this.queryParam.number = ''
this.queryParam.content = ''
this.umber = false
this.Title = false
}
}
}
最最主要的代码是拦截
// 拦截
change (e) {
const file = e.target.files[0]
const formData = new FormData()
formData.append('userfile', file)
messageLoad(formData)
.then((res) => {
const quill = this.$refs.myQuillEditor.quill
if (res === '上传成功') {
const length = quill.getSelection().index // 光标位置
// 插入图片 图片地址
const imgurl = `http://网址:端口号/messagefiles/` + e.target.files[0].name
// const imgurl = window.location.protocol + '//' + window.location.host + '/messagefiles/' + e.target.files[0].name
quill.insertEmbed(length, 'image', imgurl)
// 调整光标到最后
quill.setSelection(length + 1) // 光标后移一位
}
})
.catch((err) => {
console.error(err)
})
},