TinyMCE内联模式下iframe被转换为img标签的问题求助

嘿，这个坑我之前踩过！TinyMCE内联模式下把iframe转成带一堆data-mce-*属性的占位img，本质是它默认的内容过滤和安全策略在搞事情——为了防范不安全的嵌入内容，它会自动把iframe替换成占位图，同时把原属性存在data-mce-p-*前缀里。下面给你几个靠谱的解决办法：

1. 明确允许iframe标签（最推荐） #

直接在TinyMCE的初始化配置里，通过extended_valid_elements指定允许iframe和它需要的属性，这样编辑器就不会乱转换了：

tinymce.init({
  selector: '#你的编辑器选择器',
  inline: true,
  // 这里列出你需要保留的iframe属性，按需添加
  extended_valid_elements: 'iframe[src|frameborder|allowfullscreen|width|height|class|style]'
});

比如你例子里的YouTube嵌入，需要src、allowfullscreen、frameborder这些属性，都列进去就ok。

2. 关闭自动清理（谨慎用！） #

如果上面的方法不够，或者你需要完全自定义内容过滤，可以尝试关闭TinyMCE的自动内容清理，但只建议在完全信任内容来源的场景下用，不然会有安全风险：

tinymce.init({
  selector: '#你的编辑器选择器',
  inline: true,
  cleanup: false,
  verify_html: false
});

3. 恢复已被转换的内容 #

如果已经有一批内容被转成了带data-mce-object="iframe"的img标签，你可以在前端渲染内容的时候，把这些img转回到iframe：

// 假设你的内容放在class为content-wrap的容器里
document.querySelectorAll('.content-wrap img[data-mce-object="iframe"]').forEach(imgEl => {
  const iframe = document.createElement('iframe');
  // 从data属性里提取原iframe的参数
  iframe.src = imgEl.dataset.mcePSrc;
  iframe.frameborder = imgEl.dataset.mcePFrameborder;
  iframe.allowfullscreen = imgEl.dataset.mcePAllowfullscreen === 'allowfullscreen';
  iframe.width = imgEl.width;
  iframe.height = imgEl.height;
  // 复制class、style这些样式属性
  iframe.className = imgEl.className;
  iframe.style.cssText = imgEl.style.cssText;
  
  // 用iframe替换掉原来的img
  imgEl.parentNode.replaceChild(iframe, imgEl);
});

另外提醒一句：内联模式下TinyMCE的安全限制会比常规模式更严，如果你用的是CMS，还要确保后端不会把iframe标签过滤掉，不然前端配置好了也白搭。

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