Breaking News: Grepper is joining You.com. Read the official announcement!

vue2-editor save image

Concerned Copperhead answered on January 31, 2022 Popularity 7/10 Helpfulness 2/10

answer vue2-editor save image

vue2-editor save image

Comment

<template>
  <div id="app">
    <vue-editor use-custom-image-handler @image-added="handleImageAdded" v-model="data[dataItem + lang.code]" :editorOptions="editorSettings"></vue-editor>
  </div>
</template>

<script>
import { VueEditor,Quill } from 'vue2-editor'
import axios from "axios";
import ImageResize from 'quill-image-resize-vue';
import { ImageDrop } from 'quill-image-drop-module';

Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);

export default {
  name: 'Editor',
  components: {
    VueEditor
  },
  props: ['data', 'lang', 'dataItem'],
  data() {
    return {
      htmlForEditor: "",
      editorSettings: {
        modules: {
          imageDrop: true,
          imageResize: {},
        }
      }
    };
  },

  methods: {
    handleImageAdded: function (file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData();
      formData.append("file", file);
      var vuex = window.localStorage.getItem('vuex')
      var token = JSON.parse(vuex);

      axios({
        url: this.base_url + "/file/fileupload",
        method: "POST",
        data: formData,
        headers: {'Authorization': 'Bearer ' + token.auth.userToken}
      }).then(result => {
        let url = result.data.filePath; // Get url from response
        Editor.insertEmbed(cursorLocation, "image", url);
        resetUploader();
      }).catch(err => {
        alert('yukleme basarisiz! ' + err)
      });
    }
  }
};
</script>

Popularity 7/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript save-image

Link to this answer
Share Copy Link

Contributed on Jan 31 2022

Concerned Copperhead

0 Answers Avg Quality 2/10

vue2-editor save image

Contents

More Related Answers

vue2-editor save image

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.