elementui富文本怎么获取上传图片？

Z时代
2024-03-03
分类：IT

富文本中，我需要将图片上传到OSS中，数据库只是保存OSS地址，但是图片无法精准的获取到，在富文本要怎么获取这个图片

回答：

先找到你的富文本编辑器是啥？然后找对应文档，一般配置文档内都有配置项

回答：

elementUi并没有富文本编辑器，你用的是不是tinymce？如果是可以看一下images_upload_handler属性。

回答：

如果你用的是 vue-quill-editor，

import Quill from 'quill';
quill.on('text-change', function(delta, oldDelta, source) {
  if (source == 'user') {
    let html = quill.root.innerHTML;
    let regex = /<img src="(.*?)"/g;
    let match;
    while ((match = regex.exec(html)) !== null) {
      let imgSrc = match[1];  // 图片的 src
      //  imgSrc 上传到 OSS
      // 上传成功后，用 Quill 的 API 来替换原来的 src
    }
  }});

2.ElementUI中使用富文本编辑器(quill-editor）实现图片视频上传，图片拖拽和缩放，以及菜单悬停显示中文和表情包：https://blog.csdn.net/m0_61820867/article/details/126035579
3.Element UI 之富文本图片上传服务器 + 图片地址插入富文本：https://www.dgrt.cn/a/1718783.html?action=onClick

<template>
  <div class="testuploadquillpicandback">
    <quill-editor
      @change="onEditorChange($event)"
      id="desc"
      ref="quill"
      v-model="desc"
      :options="editorOption"
    ></quill-editor>
  </div>
</template>
<script>
import { quillEditor, Quill } from 'vue-quill-editor';
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module';
Quill.register('modules/ImageExtend', ImageExtend);
export default {
  data() {
    return {
      desc: '',
      editorOption: {
        placeholder: '此处输入赛事规程',
        modules: {
          ImageExtend: {
            loading: true,
            name: 'file',
            size: 1,
            action: '/feelings/common/upload/file',
            response: res => {
              console.log(res);
              const imgUrl = 'http://' + res.data;
              return imgUrl;
            },
            headers: xhr => {
              xhr.setRequestHeader("token", window.sessionStorage.getItem('token'));
            },
            sizeError: () => {},
            start: () => {},
            end: () => {},
            error: () => {},
            success: () => {
              console.log('ImageExtend中的success：上传成功');
            },
            change: (xhr, formData) => {},
          },
          toolbar: {
            container: [
              ["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: [] }],
              [{ align: [] }],
              ["image"],
            ],
            handlers: {
              image: function() {
                QuillWatch.emit(this.quill.id);
              },
            },
          },
        },
      },
    };
  },
  methods: {
    onEditorChange(e) {
      console.log('onEditorChange打印e');
      console.log(e);
    },
  },
};
</script>