Quill editor + VueJS2 image upload: Base64 image to URL

Question

Using editor from here: https://github.com/surmon-china/vue-quill-editor

I want to save images from Quill editor to MySQL database, but bigger images in base64 are too long to insert.

I tried to write custom image handler, so that it auto uploads image to server and server returns image URL but now I'm stuck.

Here is my current HTML:

<quill-editor v-model="content"
    :options="editorOption"
    @onEditorBlur($event)"
    @onEditorFocus($event)"
    @onEditorReady($event)"
    @onEditorChange($event)">
</quill-editor>

Adding image handler to editor like this:

onEditorReady(editor) {
    editor.getModule('toolbar').addHandler('image', this.imageHandler);
    console.log('editor ready!', editor);
},

And my own handler:

imageHandler(image, callback){
    console.log(image); // Always true
    console.log(callback); // Always undefined

    // Should get image in here somehow..
    var sendData = {
        image: 'SomethingShouldBeInHere',
    };

    // Send image to server, 
    //  Server will return link to image
    axios.put('/testImageUpload', sendData)
    .then(function(cbData) {
        // In here should add image tag to editor somehow..

    })
    .catch(function (error) {
        console.log(error);
    });
},

I tried this: Add support for custom image handler But it doesn't work, since image is always true and callback is undefined.

Tried this too: Quill imageHandler Demo It has same problems first link.

Currently server is hardcoded to return "http://localhost/images/php.jpg"

If possible I would not use any libraries (jQuery, dropzone, etc)

I thought I can perhaps check if image was inserted in onEditorChange(), then send request to server, get URL, search for this base64 in editor and replace it with URL, but it doesn't seem right.

Answer 1

set handlers in your options like this

editorOption: {
  modules: {
   toolbar: {
    container: [['image'], ...],
    handlers: {
     'image': function(){
      document.getElementById('getFile').click()
     }
    }
   } 
  }
}


methods: {
  uploadFunction(e){
  
    //you can get images data in e.target.files
    //an single example for using formData to post to server
    
    
    var form = new FormData()
    form.append('file[]', e.target.files[0])
    
    //do your post
    
    
  }
}

<template>
  <quill-editor v-model="content"
            :options="editorOption"
            @change="oneEditorChange($event)">
  </quill-editor>
  <input type="file" id="getFile" @change="uploadFunction($event)" />
</template>

Answer 2

This my source code....

//Template
<input type="file" @change="uploadFunction" id="file" hidden>

<quill-editor 
      v-model="model" 
      :options="editorOption" 
      ref="quillEdit">
</quill-editor>

and script

 //script
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    import Quill from "quill";
    import { quillEditor } from "vue-quill-editor";
    import ImageResize from "quill-image-resize-module";
    import axios from '~/plugins/axios'

    export default {
      data() {
        model: '',
        selectedFile : '',
        editorOption: {
            // some quill options
            modules: {
              toolbar: {
                container: [["bold", "image"]],
                handlers: {
                  image: function() {
                    document.getElementById('file').click()
                  }
                }
              },
              imageResize: {
                modules: ["Resize", "DisplaySize", "Toolbar"]
              }
            }
          },
       },
       methods: {
        uploadFunction(e){
             this.selectedFile = e.target.files[0];

          var form = new FormData();
          form.append("file", this.selectedFile);
          form.append("name", this.selectedFile.name);

            //upload image to server
            axios.post('media-save', form,{
             'headers': {
                 'Content-Type': "multipart/form-data"
              }
             })
            .then(r => {
              console.log('success')

              //this code to set your position cursor
const range = this.$refs.quillEdit.quill.getSelection()
//this code to set image on your server to quill editor
              this.$refs.quillEdit.quill.insertEmbed(range.index , 'image', `http://your.api/${r}`)
            })
            .catch(e => {
              console.log('error')
         }
       }
    }