如何在TinyMCE编辑器中渲染IFRAME标签并实现前端正常展示？

针对你遇到的iframe仅显示纯文本的问题，可按以下步骤排查解决：

• 调整TinyMCE配置，允许iframe标签保留
  确保编辑器不会过滤或转义iframe标签，在TinyMCE初始化配置中添加允许规则：

  tinymce.init({
    // 其他已有配置...
    extended_valid_elements: 'iframe[src|width|height|frameborder|allowfullscreen|loading]',
    entity_encoding: 'raw' // 避免HTML实体被过度转义
  });
  

  该配置会让TinyMCE保留原始的iframe标签结构，不会将其转为纯文本格式。

• 确认后端存储逻辑未转义HTML
  检查存储$item->display_paragraph的代码，确保没有使用htmlspecialchars()、strip_tags()这类会转义或移除HTML标签的函数，直接保存编辑器提交的原始HTML内容即可。

• 验证Blade输出的变量内容
  虽然你使用了Blade的非转义输出语法{!! $item->display_paragraph !!}，但需确认变量本身存储的是未转义的<iframe>标签，而非<iframe>这类转义字符。可以在后端打印变量验证：

  dd($item->display_paragraph); // 查看输出是否包含原始的<iframe>标签
  

  如果变量已被转义，可先反转义再输出：

  {!! htmlspecialchars_decode($item->display_paragraph) !!}
  

• 检查内容安全策略（CSP）限制
  若页面设置了严格的CSP，可能会阻止YouTube iframe加载。需在页面中添加允许规则：

  <meta http-equiv="Content-Security-Policy" content="frame-src https://www.youtube.com;">
  

  也可通过服务器配置（如Nginx、Apache）在响应头中设置对应CSP规则。

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