Open fred-hu opened 3 years ago
You can add a upload slot inside quasar-tiptap label
quasar-tiptap
<template> <q-page class="new_blog_template"> <quasar-tiptap v-bind="options" @update="onUpdate" scrollable> <template slot="toolbar-left"> <q-separator vertical inset /> </template> <template slot="toolbar-left"> <el-upload class="img-uploader" action="" :http-request="uploadImg" :before-upload="beforeImgUpload" :on-remove="removeImg" list-type="picture"> <q-icon name="upload" class="text-black" style="font-size: 32px;" /> </el-upload> </template> </quasar-tiptap> </q-page> </template>
// 上传图片 uploadImg (item) { const savepath = 'datasets' const formData = new FormData() formData.append('file', item.file) formData.append('path', savepath) const uid = item.file.uid uploadFile(formData).then(res => { document.execCommand('insertHTML', true, '<div><img src="' + res + '" /></div>') }).catch((res) => { this.$message.error('upload failed!' + res) }) },
the code document.execCommand('insertHTML', true, '<div><img src="' + res + '" /></div>') can auto insert the image just upload in position of mouse cursor.
document.execCommand('insertHTML', true, '<div><img src="' + res + '" /></div>')
You can add a upload slot inside
quasar-tiptap
labelthe code
document.execCommand('insertHTML', true, '<div><img src="' + res + '" /></div>')
can auto insert the image just upload in position of mouse cursor.