如何在 Laravel 中动态调整 TinyMCE 插入的 iframe 尺寸

3次阅读

如何在 Laravel 中动态调整 TinyMCE 插入的 iframe 尺寸

本文介绍在 laravel blade 模板中,通过 css 样式精准控制 tinymce 编辑器插入的 iframe 宽高,解决渲染后 iframe 显示过小的问题,无需修改数据库内容或后端逻辑。

本文介绍在 laravel blade 模板中,通过 css 样式精准控制 tinymce 编辑器插入的 iframe 宽高,解决渲染后 iframe 显示过小的问题,无需修改数据库内容或后端逻辑。

在使用 TinyMCE 编辑器向 Laravel 5.8 应用中插入视频(如 Aparat、YouTube 或自定义嵌入)时,编辑器通常会生成带外层容器(如

)和内嵌
  • Blade 中嵌入位置:将
  • ✅ 进阶建议:统一管理嵌入样式

    若项目中存在多种 iframe 类型(如 YouTube、Vimeo、Aparat),可定义通用类并统一处理:

    <style> /* 通用嵌入容器规范 */ .embed-responsive {   position: relative;   width: 100%;   padding-bottom: 56.25%; /* 16:9 aspect ratio */   height: 0;   overflow: hidden; } .embed-responsive iframe {   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   border: 0; } </style>  <!-- 在 Blade 中使用 --> <div class="embed-responsive">   {!! $new->nws_description !!} </div>

    此时需配合 TinyMCE 配置,确保插入的 iframe 被包裹在具有 embed-responsive 类的容器中(可通过 valid_children 或自定义插件实现),但对现有数据而言,前述 .h_iframe-aparat_embed_frame iframe 方案更轻量、零侵入。

    综上,不修改数据、不改动后端、仅靠前端 CSS 即可优雅解决 iframe 尺寸问题——这是符合现代 Web 开发规范的高效实践。

    text=ZqhQzanResources