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

Posted 2023-02-16

【中文标题】我可以在 vue2 编辑器中获得没有添加图像处理程序的 Editor 和 cursorLocation

【英文标题】：Can I get Editor and cursorLocation without image-added handler in vue2 editor

【发布时间】：2022-01-03 16:48:13

【问题描述】：

这就是 vue-editor 目前的工作方式。

<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 参数。

【参考方案1】：

这是我自己的问题的方法。 Editor 和 cursorLocation 可以通过 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>