[Vuejs]-Can I get Editor and cursorLocation without image-added handler in vue2 editor

by

0👍

Here is my approach to my own question.
The Editor and cursorLocation can be accessed through ref in vue-editor component.

<template>
  <div>
    <button @click.prevent="insertPhoto">Insert Photo</button>
    <client-only>
      <vue-editor class="editor" v-model="blogContent" ref="editor" @focus="onFocus"
    /></client-only>
  </div>
</template>

<script>
let VueEditor
if (process.client) {
  VueEditor = require('vue2-editor').VueEditor
}
export default {
  data() {
    return {
      blogContent: null,
      customToolbar: [
        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
        ['blockquote', 'code-block'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ script: 'sub' }, { script: 'super' }],
        [{ color: [] }, { background: [] }],
        ['link'],
      ],
      quill: null,
      imageURL: null,
    }
  },
  mounted() {
    setTimeout(() => {
      this.$refs.editor.quill.focus() //You should use this directly in the function for modal opening. This is just for demo.
    }, 2000)
  },
  components: { VueEditor },
  methods: {
    onFocus(quill) {
      this.quill = quill
    },
    async insertPhoto() {
      //Set your own image URL
      this.imageURL =
        'https://images.unsplash.com/photo-1637824504309-6dc3a16173c5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=600&q=10'

      const Editor = this.quill
      const range = Editor.getSelection()
      const cursorLocation = await range.index
      await Editor.editor.insertEmbed(cursorLocation, 'image', this.imageURL)
    },
  },
}
</script>

Leave a comment