vue-quill-editor 文本内容的图片回显在前台小程序上的实现_vue 富文本编辑器 显示图片

推荐使用 elmentui 中的 upload 的组件配合此富文本编辑器使用。

原理是点击富文本编辑器上的图片上传按钮，触发 el 的上传组件

HTML部分

<!-- 商品内容 -->
 
<!-- 使用el上传组件配合编辑器 -->
<el-upload class="avatar-uploader" :action='uploadUrl' name="img" :show-file-list="false" :on-success="uploadSuccess">
</el-upload>
 
<!-- 编辑器 -->
<quill-editor class='editor' ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" />

需要 action 属性指定请求路径，show-file-list 让此组件隐藏

理论上这样做可以了，但是默认上传给服务器存储的却是 base64 格式的图片地址，这样图片太大的话会存入数据库失败，且我们需要后端的上传接口返回一个图片的 url 作为存储较为合适。

---------------------------------------------------------

编辑器这里给一个 ref 引用，为了获取编辑器中的按钮 dom 元素

使用此方法必须配置编辑器中的工具栏项目

<script>
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'],
  [{ header: 1 }, { header: 2 }], // 几级标题
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
  [{ script: 'sub' }, { script: 'super' }], // 下角标，上角标
  [{ indent: '-1' }, { indent: '+1' }], // 缩进
  [{ direction: 'rtl' }], // 文字输入方向
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 颜色选择
  [{ font: ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体
  [{ align: [] }], // 居中
  ['clean'], // 清除样式,
  ['link', 'image'] // 上传图片、上传视频
]
 
export default {
    .....
}
 
 
....
</script>

upload 组件绑定了一个 uploadSuccess 函数，用来处理图片上传成功后的逻辑。那么

uploadSuccess(res) {
      // 获取富文本组件实例
      const quill = this.$refs.myQuillEditor.quill
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        const length = quill.getSelection().index
        // 插入图片，res为服务器返回的图片链接地址
        const newUrl = process.env.VUE_APP_BASEURL + res.url
        quill.insertEmbed(length, 'image', newUrl)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        this.$message.error('图片插入失败！')
      }
    }

res.url 是后端返回的图片的 url 地址，这样存储给编辑器中，然后发布文章的时候，就会将此 url 存储在数据库中。