vue中quill-editor添加链接功能，代码实现

在使用vue-quill-editor插件时，可以通过添加toolbar选项来实现添加链接的功能。具体实现步骤如下：

1. 安装vue-quill-editor插件

npm install vue-quill-editor

2. 在vue组件中引入vue-quill-editor插件，并添加toolbar选项

<template>
  <div>
    <quill-editor v-model="content" :options="editorOption"></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'color': [] }, { 'background': [] }],
            ['link']
          ]
        }
      }
    }
  }
}
</script>

在以上代码中，我们添加了一个名为`editorOption`的数据选项，并将其传递给`quill-editor`组件的`options`属性。在`editorOption`中，我们定义了一个名为`toolbar`的模块，其中包含了加粗、斜体、下划线、颜色、背景色和链接等选项。

3. 监听editor的change事件，获取链接地址

<template>
  <div>
    <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @change="handleChange"></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'color': [] }, { 'background': [] }],
            ['link']
          ]
        }
      }
    }
  },
  methods: {
    handleChange () {
      const quill = this.$refs.myQuillEditor.quill // 获取quill实例
      const link = quill.getModule('toolbar').getHandler('link').value() // 获取链接地址
      console.log(link)
    }
  }
}
</script>

在以上代码中，我们使用`@change`事件监听editor的变化，并通过`this.$refs.myQuillEditor.quill`获取到quill实例。然后，我们通过`quill.getModule('toolbar').getHandler('link').value()`获取到链接地址，并打印出来。

至此，我们完成了在vue-quill-editor插件中添加链接的功能。