[{"data":1,"prerenderedAt":1110},["ShallowReactive",2],{"docsNavigation":3,"blogNavigation":53,"/blog/wangeditor-img-filter-issue":95,"/blog/wangeditor-img-filter-issue-surround":1105},[4,38],{"title":5,"path":6,"stem":7,"children":8,"icon":37},"常用网站","/docs/getting-started","1.docs/1.getting-started/1.index",[9,12,17,22,27,32],{"title":10,"path":6,"stem":7,"icon":11},"区块链相关(前端)","i-lucide-box",{"title":13,"path":14,"stem":15,"icon":16},"图片压缩","/docs/getting-started/photo-compression","1.docs/1.getting-started/2.photo-compression","i-lucide-image",{"title":18,"path":19,"stem":20,"icon":21},"组件库","/docs/getting-started/component-library","1.docs/1.getting-started/3.component-library","i-lucide-puzzle",{"title":23,"path":24,"stem":25,"icon":26},"图表库","/docs/getting-started/charts","1.docs/1.getting-started/4.charts","i-lucide-bar-chart-3",{"title":28,"path":29,"stem":30,"icon":31},"CSS","/docs/getting-started/css","1.docs/1.getting-started/5.css","i-lucide-palette",{"title":33,"path":34,"stem":35,"icon":36},"调试测试工具","/docs/getting-started/test","1.docs/1.getting-started/6.test","i-lucide-bug",false,{"title":39,"path":40,"stem":41,"children":42,"page":37},"常用工具","/docs/essentials","1.docs/2.essentials",[43,48],{"title":44,"path":45,"stem":46,"icon":47},"uni-helper","/docs/essentials/uni-helper","1.docs/2.essentials/1.uni-helper","i-lucide-settings",{"title":49,"path":50,"stem":51,"icon":52},"工作流可视化库","/docs/essentials/workflow-libraries","1.docs/2.essentials/2.workflow-libraries","i-lucide-workflow",[54],{"title":55,"path":56,"stem":57,"children":58,"page":37},"Blog","/blog","3.blog",[59,63,67,71,75,79,83,87,91],{"title":60,"path":61,"stem":62},"Vue 3 中 \u003CTransition> 报错：组件根节点无法被动画化的解决方案","/blog/asian-cuisine","3.blog/1.asian-cuisine",{"title":64,"path":65,"stem":66},"使用 openapi-ts-request 自动生成 API 请求代码","/blog/apifox-api-generation","3.blog/2.apifox-api-generation",{"title":68,"path":69,"stem":70},"解决 uni.upload 多文件上传限制：使用 fetch + FormData 实现 H5 环境下的多文件上传","/blog/file-upload-issue-solution","3.blog/3.file-upload-issue-solution",{"title":72,"path":73,"stem":74},"Wangeditor中被div包裹的img标签被过滤问题解决方案","/blog/wangeditor-img-filter-issue","3.blog/4.wangeditor-img-filter-issue",{"title":76,"path":77,"stem":78},"Nuxt项目部署后报错 “Cannot load payload /_payload.json” 的修复","/blog/nuxt-payload-extraction","3.blog/5.nuxt-payload-extraction",{"title":80,"path":81,"stem":82},"Nuxt项目导入nuxt-echarts实现图表渲染","/blog/nuxt-echarts-implementation","3.blog/6.nuxt-echarts-implementation",{"title":84,"path":85,"stem":86},"Reown+Wagmi 在 UniApp+Vite 项目中的问题与解决方案","/blog/reown-wagmi-uniapp-issues","3.blog/7.reown-wagmi-uniapp-issues",{"title":88,"path":89,"stem":90},"数字滚动动画组件 - Vue 动画最佳实践","/blog/number-scroll-animation","3.blog/8.number-scroll-animation",{"title":92,"path":93,"stem":94},"新电脑安装 nvm 卡住？无需修改配置文件，一行命令完美解决！","/blog/nvm-install-solution","3.blog/9.nvm-install-solution",{"id":96,"title":72,"authors":97,"badge":102,"body":104,"date":1097,"description":1098,"extension":1099,"image":1100,"meta":1102,"navigation":544,"path":73,"seo":1103,"stem":74,"__hash__":1104},"posts/3.blog/4.wangeditor-img-filter-issue.md",[98],{"name":99,"avatar":100},"qibmz",{"src":101},"/image/avatar.avif",{"label":103},"work",{"type":105,"value":106,"toc":1082},"minimark",[107,111,115,118,129,132,135,138,156,159,162,169,175,254,257,260,265,315,319,364,367,371,374,615,619,622,1043,1046,1066,1069,1072,1078],[108,109,110],"h2",{"id":110},"问题背景",[112,113,114],"p",{},"在实际项目开发过程中，我们经常会遇到需要从第三方接口导入商品详情的场景。这些商品详情通常是由富文本编辑器生成的内容，其中可能包含各种HTML标签和结构。然而，在使用Wangeditor时，我们发现了一个常见问题：当图片(img标签)被div标签包裹时，Wangeditor会将其过滤掉，导致图片无法正常显示。",[112,116,117],{},"这个问题在处理第三方接口导入的数据时尤为突出，因为这些数据的HTML结构是我们无法控制的。",[112,119,120,121,128],{},"值得注意的是，这是一个已知的社区问题，在 wangEditor 的官方 GitHub 仓库中有相关的 issue 讨论：",[122,123,127],"a",{"href":124,"rel":125},"https://github.com/wangeditor-team/wangEditor/issues/5880",[126],"nofollow","Issue #5880","，且该问题至今仍未被修复。",[108,130,131],{"id":131},"问题分析",[112,133,134],{},"Wangeditor默认会过滤掉一些可能不安全的HTML标签和属性，这是出于安全考虑的设计。然而，这种过滤机制有时会过于严格，导致合法的HTML结构（如被div包裹的img标签）也被过滤掉。",[112,136,137],{},"具体表现为：",[139,140,141,150,153],"ol",{},[142,143,144,145,149],"li",{},"从第三方接口获取的商品详情中包含",[146,147,148],"code",{},"\u003Cdiv>\u003Cimg src=\"...\" alt=\"...\"/>\u003C/div>","结构",[142,151,152],{},"在Wangeditor中显示时，img标签被移除",[142,154,155],{},"最终用户无法看到图片内容",[108,157,158],{"id":158},"去试试",[112,160,161],{},"你可以通过下面的在线编辑器链接来复现这个问题：",[112,163,164],{},[122,165,168],{"href":166,"rel":167},"https://stackblitz.com/edit/vue3-wangeditor-demo?file=src%2Fcomponents%2FBasicEditor.vue",[126],"Vue3 Wangeditor Demo",[112,170,171],{},[172,173,174],"strong",{},"操作步骤：",[139,176,177,184,247],{},[142,178,179,180,183],{},"打开链接后，在代码中找到绑定值（如 ",[146,181,182],{},"valueHtml","）或模拟异步获取内容的地方。",[142,185,186,187],{},"将其初始内容或设置的新内容改为：\n",[188,189,194],"pre",{"className":190,"code":191,"language":192,"meta":193,"style":193},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv>\u003Cimg src=\"https://img3.redocn.com/20110418/20110416_6ad206b20544a083fdb0B6Kj0dud4sro.jpg\" alt=\"\" />\u003C/div>\n","html","",[146,195,196],{"__ignoreMap":193},[197,198,201,205,209,212,215,219,222,225,229,231,234,236,239,242,244],"span",{"class":199,"line":200},"line",1,[197,202,204],{"class":203},"sMK4o","\u003C",[197,206,208],{"class":207},"swJcz","div",[197,210,211],{"class":203},">\u003C",[197,213,214],{"class":207},"img",[197,216,218],{"class":217},"spNyl"," src",[197,220,221],{"class":203},"=",[197,223,224],{"class":203},"\"",[197,226,228],{"class":227},"sfazB","https://img3.redocn.com/20110418/20110416_6ad206b20544a083fdb0B6Kj0dud4sro.jpg",[197,230,224],{"class":203},[197,232,233],{"class":217}," alt",[197,235,221],{"class":203},[197,237,238],{"class":203},"\"\"",[197,240,241],{"class":203}," />\u003C/",[197,243,208],{"class":207},[197,245,246],{"class":203},">\n",[142,248,249,250,253],{},"你会发现编辑器中原本应该显示的图片变成了 ",[146,251,252],{},"\u003Cp>\u003Cbr>\u003C/p>","，导致图片无法显示。",[108,255,256],{"id":256},"解决方案",[112,258,259],{},"经过深入研究和实践，我们找到了一个简单有效的解决方案：将div标签替换为p标签。",[261,262,264],"h3",{"id":263},"修改前的代码结构","修改前的代码结构：",[188,266,268],{"className":190,"code":267,"language":192,"meta":193,"style":193},"\u003Cdiv>\n  \u003Cimg src=\"https://img3.redocn.com/20110418/20110416_6ad206b20544a083fdb0B6Kj0dud4sro.jpg\" alt=\"\" />\n\u003C/div>\n",[146,269,270,278,305],{"__ignoreMap":193},[197,271,272,274,276],{"class":199,"line":200},[197,273,204],{"class":203},[197,275,208],{"class":207},[197,277,246],{"class":203},[197,279,281,284,286,288,290,292,294,296,298,300,302],{"class":199,"line":280},2,[197,282,283],{"class":203},"  \u003C",[197,285,214],{"class":207},[197,287,218],{"class":217},[197,289,221],{"class":203},[197,291,224],{"class":203},[197,293,228],{"class":227},[197,295,224],{"class":203},[197,297,233],{"class":217},[197,299,221],{"class":203},[197,301,238],{"class":203},[197,303,304],{"class":203}," />\n",[197,306,308,311,313],{"class":199,"line":307},3,[197,309,310],{"class":203},"\u003C/",[197,312,208],{"class":207},[197,314,246],{"class":203},[261,316,318],{"id":317},"修改后的代码结构","修改后的代码结构：",[188,320,322],{"className":190,"code":321,"language":192,"meta":193,"style":193},"\u003Cp>\n  \u003Cimg src=\"https://img3.redocn.com/20110418/20110416_6ad206b20544a083fdb0B6Kj0dud4sro.jpg\" alt=\"\" />\n\u003C/p>\n",[146,323,324,332,356],{"__ignoreMap":193},[197,325,326,328,330],{"class":199,"line":200},[197,327,204],{"class":203},[197,329,112],{"class":207},[197,331,246],{"class":203},[197,333,334,336,338,340,342,344,346,348,350,352,354],{"class":199,"line":280},[197,335,283],{"class":203},[197,337,214],{"class":207},[197,339,218],{"class":217},[197,341,221],{"class":203},[197,343,224],{"class":203},[197,345,228],{"class":227},[197,347,224],{"class":203},[197,349,233],{"class":217},[197,351,221],{"class":203},[197,353,238],{"class":203},[197,355,304],{"class":203},[197,357,358,360,362],{"class":199,"line":307},[197,359,310],{"class":203},[197,361,112],{"class":207},[197,363,246],{"class":203},[108,365,366],{"id":366},"实现步骤",[261,368,370],{"id":369},"_1-数据预处理","1. 数据预处理",[112,372,373],{},"在将第三方接口获取的数据加载到Wangeditor之前，我们需要对数据进行预处理：",[188,375,379],{"className":376,"code":377,"language":378,"meta":193,"style":193},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// 预处理函数：将div标签替换为p标签\nfunction preprocessEditorContent(content) {\n  // 将被div包裹的img标签替换为被p标签包裹的img标签\n  const processedContent = content.replace(\n    /<div>(\\s*<img[^>]*>)\\s*<\\/div>/g,\n    '<p>$1</p>'\n  );\n  \n  return processedContent;\n}\n\n// 使用示例\nconst rawContent = getThirdPartyData(); // 从第三方接口获取的原始数据\nconst processedContent = preprocessEditorContent(rawContent);\neditor.txt.html(processedContent); // 加载到Wangeditor中\n","javascript",[146,380,381,387,409,414,439,495,507,516,522,533,539,546,552,575,592],{"__ignoreMap":193},[197,382,383],{"class":199,"line":200},[197,384,386],{"class":385},"sHwdD","// 预处理函数：将div标签替换为p标签\n",[197,388,389,392,396,399,403,406],{"class":199,"line":280},[197,390,391],{"class":217},"function",[197,393,395],{"class":394},"s2Zo4"," preprocessEditorContent",[197,397,398],{"class":203},"(",[197,400,402],{"class":401},"sHdIc","content",[197,404,405],{"class":203},")",[197,407,408],{"class":203}," {\n",[197,410,411],{"class":199,"line":307},[197,412,413],{"class":385},"  // 将被div包裹的img标签替换为被p标签包裹的img标签\n",[197,415,417,420,424,427,430,433,436],{"class":199,"line":416},4,[197,418,419],{"class":217},"  const",[197,421,423],{"class":422},"sTEyZ"," processedContent",[197,425,426],{"class":203}," =",[197,428,429],{"class":422}," content",[197,431,432],{"class":203},".",[197,434,435],{"class":394},"replace",[197,437,438],{"class":207},"(\n",[197,440,442,445,448,450,453,456,459,462,465,468,470,472,474,476,479,482,485,488,492],{"class":199,"line":441},5,[197,443,444],{"class":203},"    /",[197,446,447],{"class":227},"<div>",[197,449,398],{"class":203},[197,451,452],{"class":227},"\\s",[197,454,455],{"class":203},"*",[197,457,458],{"class":227},"<img",[197,460,461],{"class":203},"[^",[197,463,464],{"class":227},">",[197,466,467],{"class":203},"]*",[197,469,464],{"class":227},[197,471,405],{"class":203},[197,473,452],{"class":227},[197,475,455],{"class":203},[197,477,478],{"class":227},"<",[197,480,481],{"class":422},"\\/",[197,483,484],{"class":227},"div>",[197,486,487],{"class":203},"/",[197,489,491],{"class":490},"sbssI","g",[197,493,494],{"class":203},",\n",[197,496,498,501,504],{"class":199,"line":497},6,[197,499,500],{"class":203},"    '",[197,502,503],{"class":227},"<p>$1</p>",[197,505,506],{"class":203},"'\n",[197,508,510,513],{"class":199,"line":509},7,[197,511,512],{"class":207},"  )",[197,514,515],{"class":203},";\n",[197,517,519],{"class":199,"line":518},8,[197,520,521],{"class":207},"  \n",[197,523,525,529,531],{"class":199,"line":524},9,[197,526,528],{"class":527},"s7zQu","  return",[197,530,423],{"class":422},[197,532,515],{"class":203},[197,534,536],{"class":199,"line":535},10,[197,537,538],{"class":203},"}\n",[197,540,542],{"class":199,"line":541},11,[197,543,545],{"emptyLinePlaceholder":544},true,"\n",[197,547,549],{"class":199,"line":548},12,[197,550,551],{"class":385},"// 使用示例\n",[197,553,555,558,561,563,566,569,572],{"class":199,"line":554},13,[197,556,557],{"class":217},"const",[197,559,560],{"class":422}," rawContent ",[197,562,221],{"class":203},[197,564,565],{"class":394}," getThirdPartyData",[197,567,568],{"class":422},"()",[197,570,571],{"class":203},";",[197,573,574],{"class":385}," // 从第三方接口获取的原始数据\n",[197,576,578,580,583,585,587,590],{"class":199,"line":577},14,[197,579,557],{"class":217},[197,581,582],{"class":422}," processedContent ",[197,584,221],{"class":203},[197,586,395],{"class":394},[197,588,589],{"class":422},"(rawContent)",[197,591,515],{"class":203},[197,593,595,598,600,603,605,607,610,612],{"class":199,"line":594},15,[197,596,597],{"class":422},"editor",[197,599,432],{"class":203},[197,601,602],{"class":422},"txt",[197,604,432],{"class":203},[197,606,192],{"class":394},[197,608,609],{"class":422},"(processedContent)",[197,611,571],{"class":203},[197,613,614],{"class":385}," // 加载到Wangeditor中\n",[261,616,618],{"id":617},"_2-针对多种html结构的处理","2. 针对多种HTML结构的处理",[112,620,621],{},"在实际应用中，HTML结构可能更加复杂，我们需要处理更多的情况：",[188,623,625],{"className":376,"code":624,"language":378,"meta":193,"style":193},"function preprocessEditorContent(content) {\n  // 替换被div包裹的img标签为被p标签包裹的img标签\n  let processedContent = content.replace(\n    /<div>(\\s*<img[^>]*>)\\s*<\\/div>/g,\n    '<p>$1</p>'\n  );\n\n  // 处理包含class等属性的div标签\n  processedContent = processedContent.replace(\n    /<div([^>]*)>(\\s*<img[^>]*>)\\s*<\\/div>/g,\n    '<p$1>$2</p>'\n  );\n\n  // 处理嵌套结构\n  processedContent = processedContent.replace(\n    /<div([^>]*)\\s*class=\"([^\"]*)\"[^>]*>(\\s*<img[^>]*>)\\s*<\\/div>/g,\n    function(match, divAttr, classAttr, imgTag) {\n      // 将div的class属性复制到p标签\n      return `<p class=\"${classAttr}\"${divAttr.replace(`class=\"${classAttr}\"`, '')}>${imgTag}</p>`;\n    }\n  );\n\n  return processedContent;\n}\n",[146,626,627,641,646,663,703,711,717,721,726,741,792,801,807,811,816,830,900,931,937,1011,1017,1024,1029,1038],{"__ignoreMap":193},[197,628,629,631,633,635,637,639],{"class":199,"line":200},[197,630,391],{"class":217},[197,632,395],{"class":394},[197,634,398],{"class":203},[197,636,402],{"class":401},[197,638,405],{"class":203},[197,640,408],{"class":203},[197,642,643],{"class":199,"line":280},[197,644,645],{"class":385},"  // 替换被div包裹的img标签为被p标签包裹的img标签\n",[197,647,648,651,653,655,657,659,661],{"class":199,"line":307},[197,649,650],{"class":217},"  let",[197,652,423],{"class":422},[197,654,426],{"class":203},[197,656,429],{"class":422},[197,658,432],{"class":203},[197,660,435],{"class":394},[197,662,438],{"class":207},[197,664,665,667,669,671,673,675,677,679,681,683,685,687,689,691,693,695,697,699,701],{"class":199,"line":416},[197,666,444],{"class":203},[197,668,447],{"class":227},[197,670,398],{"class":203},[197,672,452],{"class":227},[197,674,455],{"class":203},[197,676,458],{"class":227},[197,678,461],{"class":203},[197,680,464],{"class":227},[197,682,467],{"class":203},[197,684,464],{"class":227},[197,686,405],{"class":203},[197,688,452],{"class":227},[197,690,455],{"class":203},[197,692,478],{"class":227},[197,694,481],{"class":422},[197,696,484],{"class":227},[197,698,487],{"class":203},[197,700,491],{"class":490},[197,702,494],{"class":203},[197,704,705,707,709],{"class":199,"line":441},[197,706,500],{"class":203},[197,708,503],{"class":227},[197,710,506],{"class":203},[197,712,713,715],{"class":199,"line":497},[197,714,512],{"class":207},[197,716,515],{"class":203},[197,718,719],{"class":199,"line":509},[197,720,545],{"emptyLinePlaceholder":544},[197,722,723],{"class":199,"line":518},[197,724,725],{"class":385},"  // 处理包含class等属性的div标签\n",[197,727,728,731,733,735,737,739],{"class":199,"line":524},[197,729,730],{"class":422},"  processedContent",[197,732,426],{"class":203},[197,734,423],{"class":422},[197,736,432],{"class":203},[197,738,435],{"class":394},[197,740,438],{"class":207},[197,742,743,745,748,751,753,756,758,760,762,764,766,768,770,772,774,776,778,780,782,784,786,788,790],{"class":199,"line":535},[197,744,444],{"class":203},[197,746,747],{"class":227},"<div",[197,749,750],{"class":203},"([^",[197,752,464],{"class":227},[197,754,755],{"class":203},"]*)",[197,757,464],{"class":227},[197,759,398],{"class":203},[197,761,452],{"class":227},[197,763,455],{"class":203},[197,765,458],{"class":227},[197,767,461],{"class":203},[197,769,464],{"class":227},[197,771,467],{"class":203},[197,773,464],{"class":227},[197,775,405],{"class":203},[197,777,452],{"class":227},[197,779,455],{"class":203},[197,781,478],{"class":227},[197,783,481],{"class":422},[197,785,484],{"class":227},[197,787,487],{"class":203},[197,789,491],{"class":490},[197,791,494],{"class":203},[197,793,794,796,799],{"class":199,"line":541},[197,795,500],{"class":203},[197,797,798],{"class":227},"<p$1>$2</p>",[197,800,506],{"class":203},[197,802,803,805],{"class":199,"line":548},[197,804,512],{"class":207},[197,806,515],{"class":203},[197,808,809],{"class":199,"line":554},[197,810,545],{"emptyLinePlaceholder":544},[197,812,813],{"class":199,"line":577},[197,814,815],{"class":385},"  // 处理嵌套结构\n",[197,817,818,820,822,824,826,828],{"class":199,"line":594},[197,819,730],{"class":422},[197,821,426],{"class":203},[197,823,423],{"class":422},[197,825,432],{"class":203},[197,827,435],{"class":394},[197,829,438],{"class":207},[197,831,833,835,837,839,841,843,845,847,850,852,854,856,858,860,862,864,866,868,870,872,874,876,878,880,882,884,886,888,890,892,894,896,898],{"class":199,"line":832},16,[197,834,444],{"class":203},[197,836,747],{"class":227},[197,838,750],{"class":203},[197,840,464],{"class":227},[197,842,755],{"class":203},[197,844,452],{"class":227},[197,846,455],{"class":203},[197,848,849],{"class":227},"class=\"",[197,851,750],{"class":203},[197,853,224],{"class":227},[197,855,755],{"class":203},[197,857,224],{"class":227},[197,859,461],{"class":203},[197,861,464],{"class":227},[197,863,467],{"class":203},[197,865,464],{"class":227},[197,867,398],{"class":203},[197,869,452],{"class":227},[197,871,455],{"class":203},[197,873,458],{"class":227},[197,875,461],{"class":203},[197,877,464],{"class":227},[197,879,467],{"class":203},[197,881,464],{"class":227},[197,883,405],{"class":203},[197,885,452],{"class":227},[197,887,455],{"class":203},[197,889,478],{"class":227},[197,891,481],{"class":422},[197,893,484],{"class":227},[197,895,487],{"class":203},[197,897,491],{"class":490},[197,899,494],{"class":203},[197,901,903,906,908,911,914,917,919,922,924,927,929],{"class":199,"line":902},17,[197,904,905],{"class":217},"    function",[197,907,398],{"class":203},[197,909,910],{"class":401},"match",[197,912,913],{"class":203},",",[197,915,916],{"class":401}," divAttr",[197,918,913],{"class":203},[197,920,921],{"class":401}," classAttr",[197,923,913],{"class":203},[197,925,926],{"class":401}," imgTag",[197,928,405],{"class":203},[197,930,408],{"class":203},[197,932,934],{"class":199,"line":933},18,[197,935,936],{"class":385},"      // 将div的class属性复制到p标签\n",[197,938,940,943,946,949,952,955,958,960,962,965,967,969,971,974,976,978,980,982,984,986,988,991,993,995,997,999,1002,1004,1007,1009],{"class":199,"line":939},19,[197,941,942],{"class":527},"      return",[197,944,945],{"class":203}," `",[197,947,948],{"class":227},"<p class=\"",[197,950,951],{"class":203},"${",[197,953,954],{"class":422},"classAttr",[197,956,957],{"class":203},"}",[197,959,224],{"class":227},[197,961,951],{"class":203},[197,963,964],{"class":422},"divAttr",[197,966,432],{"class":203},[197,968,435],{"class":394},[197,970,398],{"class":422},[197,972,973],{"class":203},"`",[197,975,849],{"class":227},[197,977,951],{"class":203},[197,979,954],{"class":422},[197,981,957],{"class":203},[197,983,224],{"class":227},[197,985,973],{"class":203},[197,987,913],{"class":203},[197,989,990],{"class":203}," ''",[197,992,405],{"class":422},[197,994,957],{"class":203},[197,996,464],{"class":227},[197,998,951],{"class":203},[197,1000,1001],{"class":422},"imgTag",[197,1003,957],{"class":203},[197,1005,1006],{"class":227},"</p>",[197,1008,973],{"class":203},[197,1010,515],{"class":203},[197,1012,1014],{"class":199,"line":1013},20,[197,1015,1016],{"class":203},"    }\n",[197,1018,1020,1022],{"class":199,"line":1019},21,[197,1021,512],{"class":207},[197,1023,515],{"class":203},[197,1025,1027],{"class":199,"line":1026},22,[197,1028,545],{"emptyLinePlaceholder":544},[197,1030,1032,1034,1036],{"class":199,"line":1031},23,[197,1033,528],{"class":527},[197,1035,423],{"class":422},[197,1037,515],{"class":203},[197,1039,1041],{"class":199,"line":1040},24,[197,1042,538],{"class":203},[108,1044,1045],{"id":1045},"注意事项",[139,1047,1048,1054,1060],{},[142,1049,1050,1053],{},[172,1051,1052],{},"样式适配","：将div替换为p标签后，原有的CSS样式可能需要调整，因为p标签和div标签的默认样式可能不同。",[142,1055,1056,1059],{},[172,1057,1058],{},"语义化考虑","：从HTML语义化的角度看，p标签是用于段落的，如果div包含的不仅仅是图片，而是混合内容，需要谨慎使用此方法。",[142,1061,1062,1065],{},[172,1063,1064],{},"测试验证","：在应用此解决方案后，需要充分测试以确保没有引入其他问题。",[108,1067,1068],{"id":1068},"总结",[112,1070,1071],{},"通过将div标签替换为p标签的方式，我们成功解决了Wangeditor过滤被div包裹的img标签的问题。这种解决方案简单有效，且不会对Wangeditor的安全机制造成影响。但是鉴于Wangeditor已经不在维护，如果没有从外部导入富文本数据的功能还是可以使用，否则不建议使用Wangeditor。",[1073,1074,1075],"blockquote",{},[112,1076,1077],{},"（注：文档内容由 Copilot 生成）",[1079,1080,1081],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":193,"searchDepth":280,"depth":280,"links":1083},[1084,1085,1086,1087,1091,1095,1096],{"id":110,"depth":280,"text":110},{"id":131,"depth":280,"text":131},{"id":158,"depth":280,"text":158},{"id":256,"depth":280,"text":256,"children":1088},[1089,1090],{"id":263,"depth":307,"text":264},{"id":317,"depth":307,"text":318},{"id":366,"depth":280,"text":366,"children":1092},[1093,1094],{"id":369,"depth":307,"text":370},{"id":617,"depth":307,"text":618},{"id":1045,"depth":280,"text":1045},{"id":1068,"depth":280,"text":1068},"2026-01-04T00:00:00.000Z","解决Wangeditor对div中img标签的过滤问题，特别是处理第三方接口导入商品详情时的兼容性问题","md",{"src":1101},"https://picsum.photos/id/911/640/360",{},{"title":72,"description":1098},"24yzUczsse9WyOeuJ0-vfGjkLSxO5TInnolIDYXSdgI",[1106,1108],{"title":68,"path":69,"stem":70,"description":1107,"children":-1},"探讨如何在 H5 环境下通过 fetch + FormData 解决 uni.upload 无法在一个接口上传多个文件的问题",{"title":76,"path":77,"stem":78,"description":1109,"children":-1},"将 Nuxt 设置为非 SSR（ssr: false）并部署后出现 `/_payload.json` 无法加载的解决方法。",1774239529530]