0

0

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

聖光之護

聖光之護

发布时间:2026-02-28 14:40:02

|

225人浏览过

|

来源于php中文网

原创

如何在 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 开发规范的高效实践。

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    laravel组件介绍
    laravel组件介绍

    laravel 提供了丰富的组件,包括身份验证、模板引擎、缓存、命令行工具、数据库交互、对象关系映射器、事件处理、文件操作、电子邮件发送、队列管理和数据验证。想了解更多laravel的相关内容,可以阅读本专题下面的文章。

    338

    2024.04.09

    laravel中间件介绍
    laravel中间件介绍

    laravel 中间件分为五种类型:全局、路由、组、终止和自定。想了解更多laravel中间件的相关内容,可以阅读本专题下面的文章。

    290

    2024.04.09

    laravel使用的设计模式有哪些
    laravel使用的设计模式有哪些

    laravel使用的设计模式有:1、单例模式;2、工厂方法模式;3、建造者模式;4、适配器模式;5、装饰器模式;6、策略模式;7、观察者模式。想了解更多laravel的相关内容,可以阅读本专题下面的文章。

    665

    2024.04.09

    thinkphp和laravel哪个简单
    thinkphp和laravel哪个简单

    对于初学者来说,laravel 的入门门槛较低,更易上手,原因包括:1. 更简单的安装和配置;2. 丰富的文档和社区支持;3. 简洁易懂的语法和 api;4. 平缓的学习曲线。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    382

    2024.04.10

    laravel入门教程
    laravel入门教程

    本专题整合了laravel入门教程,想了解更多详细内容,请阅读专题下面的文章。

    133

    2025.08.05

    laravel实战教程
    laravel实战教程

    本专题整合了laravel实战教程,阅读专题下面的文章了解更多详细内容。

    81

    2025.08.05

    laravel面试题
    laravel面试题

    本专题整合了laravel面试题相关内容,阅读专题下面的文章了解更多详细内容。

    72

    2025.08.05

    js 字符串转数组
    js 字符串转数组

    js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

    638

    2023.08.03

    Golang 测试体系与代码质量保障:工程级可靠性建设
    Golang 测试体系与代码质量保障:工程级可靠性建设

    Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

    0

    2026.02.28

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Laravel---API接口
    Laravel---API接口

    共7课时 | 0.6万人学习

    PHP自制框架
    PHP自制框架

    共8课时 | 0.6万人学习

    PHP面向对象基础课程(更新中)
    PHP面向对象基础课程(更新中)

    共12课时 | 0.7万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号