双越老师，您的WangEditor怎么显示不了http请求下来的包含图片的富文本？

Question

代码如下，帮我看看好吗，感激！

<div class="border-1 border-solid border-[var(--tags-view-border-color)] z-10">
  <!-- 工具栏 -->
  <Toolbar
    :editor="editorRef"
    :editorId="editorId"
    class="border-0 b-b-1 border-solid border-[var(--tags-view-border-color)]"
  />
  <!-- 编辑器 -->
  <Editor
    :model-value="formData.html"
    :defaultConfig="editorConfig"
    :editorId="editorId"
  />
</div>

const editorRef = shallowRef<IDomEditor>()
const editorId = ref('wangeEditor-123456789')
const editorConfig = reactive({
  placeholder: '请输入内容...',
  customAlert: (s: string, t: string) => {
    switch (t) {
      case 'success':
        ElMessage.success(s)
        break
      case 'info':
        ElMessage.info(s)
        break
      case 'warning':
        ElMessage.warning(s)
        break
      case 'error':
        ElMessage.error(s)
        break
      default:
        ElMessage.info(s)
        break
    }
  },
  autoFocus: false,
  scroll: true,
  MENU_CONF: {
    ['uploadImage']: {
      server: import.meta.env.VITE_UPLOAD_URL,
      // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 5 * 1024 * 1024,
      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,
      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],

      // 自定义增加 http  header
      headers: {
        Accept: '*',
        Authorization: 'Bearer ' + getAccessToken(),
        'tenant-id': getTenantId()
      },

      // 超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒

      // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
      fieldName: 'file',

      // 上传之前触发
      onBeforeUpload(file: File) {
        // console.log(file)
        return file
      },
      // 上传进度的回调函数
      onProgress(progress: number) {
        // progress 是 0-100 的数字
        console.log('progress', progress)
      },
      onSuccess(file: File, res: any) {
        console.log('onSuccess', file, res)
      },
      onFailed(file: File, res: any) {
        alert(res.message)
        console.log('onFailed', file, res)
      },
      onError(file: File, err: any, res: any) {
        alert(err.message)
        console.error('onError', file, err, res)
      },
      // 自定义插入图片
      customInsert(res: any, insertFn: any) {
        insertFn(res.data, 'image', res.data)
      }
    },
    ['uploadVideo']: {
      server: import.meta.env.VITE_UPLOAD_URL,
      // 单个文件的最大体积限制，默认为 10M
      maxFileSize: 10 * 1024 * 1024,
      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,
      // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['video/*'],

      // 自定义增加 http  header
      headers: {
        Accept: '*',
        Authorization: 'Bearer ' + getAccessToken(),
        'tenant-id': getTenantId()
      },

      // 超时时间，默认为 30 秒
      timeout: 15 * 1000, // 15 秒

      // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
      fieldName: 'file',

      // 上传之前触发
      onBeforeUpload(file: File) {
        // console.log(file)
        return file
      },
      // 上传进度的回调函数
      onProgress(progress: number) {
        // progress 是 0-100 的数字
        console.log('progress', progress)
      },
      onSuccess(file: File, res: any) {
        console.log('onSuccess', file, res)
      },
      onFailed(file: File, res: any) {
        alert(res.message)
        console.log('onFailed', file, res)
      },
      onError(file: File, err: any, res: any) {
        alert(err.message)
        console.error('onError', file, err, res)
      },
      // 自定义插入图片
      customInsert(res: any, insertFn: any) {
        insertFn(res.data, 'mp4', res.data)
      }
    }
  },
  uploadImgShowBase64: true
})

formData.html的值为：

<div class="TRS_Editor">
 <p align="justify" style="text-align: center;">&nbsp;<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" style="border-width: 0px;" alt="" oldsrc="W020241122702188156563.jpg"></p>
  <p>test</p>
</div>

谢谢，就我现在的代码量，看得出有问题吗？

我的版本是：

"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.10",

Answer 1

双越 2024-12-11 07:57:01

你先别用富文本。你就用一个最简单的 div 显示你这段 html ，你看能显示图片吗？

• 提问者 他门说这就是人生 #1

  能，用v-html是能显示图片的。

• 双越 回复 提问者 他门说这就是人生 #2

  你把外层的 div 去掉试试呢？只保留 p 和里面的 img