You have to set definitions property:
<!-- HTML -->
<q-editor v-model="post.body" :definitions="definitions"/>
// script
data() {
return {
definitions: {
insert_img: {
tip: 'Insertar Imagen',
icon: 'photo',
handler: this.insertImg // handler will call insertImg() method
}
}
}
},
methods: {
insertImg() { // insertImg method
const post = this.post
// create an input file element to open file dialog
const input = document.createElement('input')
input.type = 'file'
input.accept = '.png, .jpg' // file extensions allowed
let file
input.onchange = _ => {
const files = Array.from(input.files)
file = files[0]
// lets load the file as dataUrl
const reader = new FileReader()
let dataUrl = ''
reader.onloadend = function() {
dataUrl = reader.result
// append result to the body of your post
post.body += '<div><img src="' + dataUrl + '" /></div>'
}
reader.readAsDataURL(file)
}
input.click()
}
}