How to load image from url in vue2-editor

Question

I am using Vue2Editor and would like to insert image from url but the default option loads image from local machine. Is there a way to insert a link to image, not select from local machine?

I tried to something on @image-added but is called after selecting event on machine.

Here is link to the editor: https://github.com/davidroyer/vue2-editor

Cenkay AYDIN · Accepted Answer · 2021-01-10 18:48:59Z

2

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

answered Jan 10, 2021 at 18:48

Cenkay AYDIN

743 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ruli Over a year ago

Welcome to StackOverflow. While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.

Collectives™ on Stack Overflow

How to load image from url in vue2-editor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related