vue项目用富文本展示图片和文字

你可以使用一些流行的富文本编辑器，如Quill、TinyMCE或CKEditor等。这些富文本编辑器通常都有插入图片和文字的功能，并且可以在Vue项目中使用。

以下是一个使用Quill富文本编辑器的示例：

1. 安装Quill

npm install quill --save

2. 在Vue组件中引入Quill

import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

3. 在Vue组件中使用Quill

<template>
  <div>
    <div ref="editor"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 初始化Quill编辑器
    const options = {
      theme: 'snow' // 主题
    }
    const editor = new Quill(this.$refs.editor, options)

    // 插入图片
    const input = document.createElement('input')
    input.setAttribute('type', 'file')
    input.setAttribute('accept', 'image/*')
    input.addEventListener('change', () => {
      const file = input.files[0]
      const reader = new FileReader()
      reader.onload = (e) => {
        const range = editor.getSelection(true)
        const index = range.index + range.length
        editor.insertEmbed(index, 'image', e.target.result)
      }
      reader.readAsDataURL(file)
    })
    editor.getModule('toolbar').addHandler('image', () => {
      input.click()
    })
  }
}
</script>

在上述示例中，我们在Vue组件的`mounted()`函数中初始化了一个Quill编辑器，并添加了插入图片的功能。要插入图片，我们首先创建了一个`<input>`元素，用于选择要插入的图片文件。然后，我们将其添加到Quill编辑器的工具栏中，并在点击时触发`change`事件，读取所选文件的数据URL并将其作为图像嵌入到编辑器中。