vue-quill-editor富文本框插入函数

Question

vue-quill-editor富文本框插入函数，这个功能有没有简单的方法，我是自己写了一个下拉框，用document追加进去的

Answer 1

在vue-quill-editor中，可以使用Quill对象的insertEmbed和insertText方法来实现在富文本框中插入内容的功能。具体的方法如下：

1.在需要使用Quill对象的组件中，首先要引入Quill对象：

import Quill from 'quill'

2.然后，在组件的mounted或created钩子函数中，可以通过以下代码来获取Quill对象：

const quill = new Quill(this.$refs.quillEditor.$refs.quillEditor)

这里使用了ref来获取vue-quill-editor的DOM节点，并通过Quill构造函数创建了一个Quill对象。

3.接下来，可以使用insertEmbed方法来插入图片等媒体文件，或使用insertText方法来插入普通文本。这些方法可以直接通过获取到的Quill对象来调用，例如：

// 插入图片
quill.insertEmbed(index, 'image', imageUrl)

// 插入普通文本
quill.insertText(index, 'Hello World!')

这里的index是需要插入内容的位置，imageUrl是图片的链接地址。

4.最后，可以将Quill对象保存到组件的data中，以便其他方法中可以调用：

data() {
  return {
    quill: null
  }
},
mounted() {
  this.quill = new Quill(this.$refs.quillEditor.$refs.quillEditor)
}

通过这种方式，在其他方法中就可以直接使用this.quill来调用Quill对象的方法了。

总的来说，使用Quill对象的方法来插入内容是一个简单而有效的方式。当然，如果您需要更多的功能，可以考虑使用vue-quill-editor提供的API来实现更复杂的功能。