带截图功能的富文本 vue

你可以使用`vue-quill-editor`插件来实现带有截图功能的富文本编辑器。

首先安装插件：

npm install vue-quill-editor --save

然后在需要使用的组件中引入和注册：

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

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

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ align: [] }],
            [{ color: [] }, { background: [] }],
            ['image', 'video', 'formula', 'code-block']
          ]
        }
      }
    }
  }
}
</script>

这里我们设置了`editorOption`来配置富文本编辑器的工具栏，其中包括了插入图片的按钮。在使用时，可以通过点击工具栏中的“图片”按钮，选择需要上传的图片即可完成插入图片的操作。

如果想要实现截图功能，可以使用`html2canvas`插件来实现。在插入图片时，先使用`html2canvas`将需要截图的元素转化为图片，再上传到服务器并插入到富文本中。

import html2canvas from 'html2canvas'

// 点击按钮截图
handleScreenshot() {
  const targetDom = this.$refs.targetDom // 需要截图的元素
  html2canvas(targetDom).then(canvas => {
    const dataURL = canvas.toDataURL() // 转化为base64格式
    this.uploadImage(dataURL) // 上传图片到服务器，返回url
  })
}

// 上传图片到服务器
async uploadImage(dataURL) {
  const formData = new FormData()
  formData.append('file', dataURL)
  const res = await axios.post('/upload', formData)
  const imageUrl = res.data.url // 获取图片url
  this.content += `<img src="${imageUrl}">` // 插入图片到富文本
}