donotebase / quasar-tiptap

A modern WYSIWYG rich-text editor built on top of tiptap and Quasar for Vue.js.
https://donotebase.github.io/quasar-tiptap
MIT License
314 stars 61 forks source link

Does it support custom uploads? #72

Open fred-hu opened 3 years ago

shartoo commented 2 years ago

You can add a upload slot inside quasar-tiptap label

<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.

微信截图_20211008214511