Joomla 5集成TinyMCE时图片容器占满页面的解决求助

用编辑器对齐功能快速实现文字环绕 #

• 插入图片后选中它，点击工具栏里的「左对齐」或「右对齐」按钮，编辑器会自动给图片添加浮动样式，文字会自动环绕在图片周围。
• 如果工具栏没有对齐按钮，去后台「系统→全局配置→文本编辑器→TinyMCE→插件选项」，在「工具栏」列表里勾选align，保存后刷新编辑器即可看到该按钮。

移除自动生成的全屏容器 #

• 插入图片后切换到「源代码」视图，你会发现图片被一个带全屏宽度类的div包裹（比如<div class="w-100">或模板自定义的全屏容器），直接删除这个div，只保留<img>标签。
• 给<img>标签添加Bootstrap浮动类：<img src="图片地址" class="float-left ms-3 mb-3" alt="图片描述">，float-left让图片左浮，ms-3和mb-3用来设置边距，避免文字和图片贴得太近。
• 若每次插入图片都会自动添加全屏容器，去TinyMCE插件设置的「媒体」选项中，找到「自动包裹图片」相关开关并关闭，或把默认容器类改成非全屏的（比如d-inline-block）。

自定义CSS覆盖模板强制样式 #

• 如果模板CSS强制图片容器宽度为100%，在模板的「自定义CSS」中添加以下代码：

  /* 替换.content为你文章内容的父容器类 */
  .content img.float-left, .content img.float-right {
      max-width: 300px; /* 按需调整图片最大宽度 */
      width: auto;
      float: left; /* 右环绕则改为float:right */
      margin: 0 15px 15px 0; /* 可根据需求自定义边距 */
  }
  

• 这段代码会强制覆盖模板样式，让浮动的图片按你设置的宽度显示，实现文字正常环绕。

检查TinyMCE内容CSS配置 #

• 进入后台TinyMCE插件选项，找到「内容CSS」配置项，查看是否存在img { width:100% }或容器强制宽度的规则，若有，直接修改或注释掉该规则，避免编辑器默认给图片添加全屏样式。

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