在vue2编辑器中，如果没有添加图像处理程序，我可以获得Editor和cursorLocation吗

Question

这就是vue编辑器目前的工作方式。

<vue-editor
class="editor"
v-model="blogContent"
:editor-toolbar="customToolbar" 
useCustomImageHandler
@image-added="imageHandler"
@focus="onFocus"
ref="editor"
/>

图像处理程序功能

imageHandler(file, Editor, cursorLocation, resetUploader) {
Editor.insertEmbed(cursorLocation, 'image', imageUrl)
}

我试图实现的是使用工具栏中的图像添加按钮。我想使用一个外部按钮，打开一个包含各种图像的模态，从中我可以选择图像以获取其URL。然后单击插入按钮，它应该像我们在上面的函数中所做的那样，将图像插入光标位置。为此，我需要Editor和cursorLocation参数。

Answer 1

以下是我解决自己问题的方法。编辑器和游标位置可以通过vue-Editor组件中的ref访问。

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