work·Jan 4, 2026·

WangEditor div 包裹的 img 被过滤：商品详情 HTML 导入修复

WangEditor 会过滤 <div><img></div> 结构，导致第三方商品详情图片丢失。本文给出自定义解析/保留图片的处理方式。

问题背景

在实际项目开发过程中，我们经常会遇到需要从第三方接口导入商品详情的场景。这些商品详情通常是由富文本编辑器生成的内容，其中可能包含各种HTML标签和结构。然而，在使用Wangeditor时，我们发现了一个常见问题：当图片(img标签)被div标签包裹时，Wangeditor会将其过滤掉，导致图片无法正常显示。

这个问题在处理第三方接口导入的数据时尤为突出，因为这些数据的HTML结构是我们无法控制的。

值得注意的是，这是一个已知的社区问题，在 wangEditor 的官方 GitHub 仓库中有相关的 issue 讨论：Issue #5880，且该问题至今仍未被修复。

问题分析

Wangeditor默认会过滤掉一些可能不安全的HTML标签和属性，这是出于安全考虑的设计。然而，这种过滤机制有时会过于严格，导致合法的HTML结构（如被div包裹的img标签）也被过滤掉。

具体表现为：

从第三方接口获取的商品详情中包含<div><img src="..." alt="..."/></div>结构
在Wangeditor中显示时，img标签被移除
最终用户无法看到图片内容

去试试

你可以通过下面的在线编辑器链接来复现这个问题：

Vue3 Wangeditor Demo

操作步骤：

打开链接后，在代码中找到绑定值（如 valueHtml）或模拟异步获取内容的地方。

将其初始内容或设置的新内容改为：

<div><img src="https://img3.redocn.com/20110418/20110416_6ad206b20544a083fdb0B6Kj0dud4sro.jpg" alt="" /></div>

你会发现编辑器中原本应该显示的图片变成了 <p><br></p>，导致图片无法显示。

解决方案

经过深入研究和实践，我们找到了一个简单有效的解决方案：将div标签替换为p标签。

修改前的代码结构：

<div>
  <img src="https://img3.redocn.com/20110418/20110416_6ad206b20544a083fdb0B6Kj0dud4sro.jpg" alt="" />
</div>

修改后的代码结构：

<p>
  <img src="https://img3.redocn.com/20110418/20110416_6ad206b20544a083fdb0B6Kj0dud4sro.jpg" alt="" />
</p>

实现步骤

1. 数据预处理

在将第三方接口获取的数据加载到Wangeditor之前，我们需要对数据进行预处理：

// 预处理函数：将div标签替换为p标签
function preprocessEditorContent(content) {
  // 将被div包裹的img标签替换为被p标签包裹的img标签
  const processedContent = content.replace(
    /&lt;div&gt;(\s*&lt;img[^&gt;]*&gt;)\s*&lt;\/div&gt;/g,
    '&lt;p&gt;$1&lt;/p&gt;'
  );
  
  return processedContent;
}

// 使用示例
const rawContent = getThirdPartyData(); // 从第三方接口获取的原始数据
const processedContent = preprocessEditorContent(rawContent);
editor.txt.html(processedContent); // 加载到Wangeditor中

2. 针对多种HTML结构的处理

在实际应用中，HTML结构可能更加复杂，我们需要处理更多的情况：

function preprocessEditorContent(content) {
  // 替换被div包裹的img标签为被p标签包裹的img标签
  let processedContent = content.replace(
    /&lt;div&gt;(\s*&lt;img[^&gt;]*&gt;)\s*&lt;\/div&gt;/g,
    '&lt;p&gt;$1&lt;/p&gt;'
  );

  // 处理包含class等属性的div标签
  processedContent = processedContent.replace(
    /&lt;div([^&gt;]*)&gt;(\s*&lt;img[^&gt;]*&gt;)\s*&lt;\/div&gt;/g,
    '&lt;p$1&gt;$2&lt;/p&gt;'
  );

  // 处理嵌套结构
  processedContent = processedContent.replace(
    /&lt;div([^&gt;]*)\s*class="([^"]*)"[^&gt;]*&gt;(\s*&lt;img[^&gt;]*&gt;)\s*&lt;\/div&gt;/g,
    function(match, divAttr, classAttr, imgTag) {
      // 将div的class属性复制到p标签
      return `&lt;p class="${classAttr}"${divAttr.replace(`class="${classAttr}"`, '')}&gt;${imgTag}&lt;/p&gt;`;
    }
  );

  return processedContent;
}

注意事项

样式适配：将div替换为p标签后，原有的CSS样式可能需要调整，因为p标签和div标签的默认样式可能不同。
语义化考虑：从HTML语义化的角度看，p标签是用于段落的，如果div包含的不仅仅是图片，而是混合内容，需要谨慎使用此方法。
测试验证：在应用此解决方案后，需要充分测试以确保没有引入其他问题。

总结

通过将div标签替换为p标签的方式，我们成功解决了Wangeditor过滤被div包裹的img标签的问题。这种解决方案简单有效，且不会对Wangeditor的安全机制造成影响。但是鉴于Wangeditor已经不在维护，如果没有从外部导入富文本数据的功能还是可以使用，否则不建议使用Wangeditor。

（注：文档内容由 Copilot 生成）

UniApp H5 多文件上传：绕过 uni.uploadFile 单文件限制（fetch + FormData）

uni.uploadFile / uni.upload 一次只能传一个文件时，在 H5 用 fetch + FormData 一次提交多个文件的实现方式与注意点。

Nuxt Cannot load payload /_payload.json：ssr:false 部署后修复

Nuxt 关闭 SSR（ssr: false）部署后出现 Cannot load payload /_payload.json 或 payload 404。本文说明原因与 payloadExtraction 等相关配置修复。