如何在React中渲染CKEditor输出的含嵌入视频的HTML内容

• <oembed>不属于原生HTML标准标签，浏览器不会自动将其解析为可播放的视频播放器
• 默认配置的DOMPurify会过滤未识别的<oembed>标签及url属性，就算浏览器支持该标签，也会在渲染前被清理

方案1：前端自行解析oembed标签（最常见，无需改动后端） #

步骤1：调整DOMPurify配置，放行oembed相关内容 #

修改消毒逻辑，保留<oembed>标签和它的url属性：

const cleanHtml = DOMPurify.sanitize(HTMLDATA, {
  ADD_TAGS: ['oembed'],
  ADD_ATTR: ['url']
})

渲染部分保持不变：

<div className="content-wrapper" dangerouslySetInnerHTML={{__html: cleanHtml}}></div>

步骤2：渲染后将oembed标签替换为视频iframe #

通过useEffect监听内容变化，在DOM渲染完成后批量替换所有oembed标签为对应平台的播放器代码：

useEffect(() => {
  // 查找内容区域下所有oembed标签
  const oembedList = document.querySelectorAll('.content-wrapper oembed')
  
  oembedList.forEach(oembed => {
    const videoUrl = oembed.getAttribute('url')
    // 匹配vimeo视频
    if (videoUrl.includes('vimeo.com')) {
      const videoId = videoUrl.split('/').pop()
      // 生成vimeo标准播放器iframe
      const iframe = document.createElement('iframe')
      iframe.src = `https://player.vimeo.com/video/${videoId}`
      iframe.width = '100%'
      iframe.height = '400'
      iframe.frameBorder = '0'
      iframe.allow = 'autoplay; fullscreen; picture-in-picture'
      // 替换原有oembed标签
      oembed.parentNode.replaceChild(iframe, oembed)
    }
    // 可按相同规则扩展其他视频平台的解析逻辑
  })
}, [HTMLDATA]) // 内容更新时重新执行解析

如果需要响应式视频效果，可添加以下CSS：

.content-wrapper iframe {
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

方案2：后端预解析oembed（性能更优） #

后端存储CKEditor提交的内容时，提前将所有<oembed>标签解析转换为对应平台的标准iframe代码再入库，前端直接渲染消毒后的内容即可，无需额外做前端解析逻辑。

内容的提问来源于stack exchange，提问作者DEV