将 <iframe> 添加到 TinyMCE 会破坏页面布局答案

【问题标题】：Adding <iframe> into TinyMCE breaks the page layout将 <iframe> 添加到 TinyMCE 会破坏页面布局
【发布时间】：2012-03-04 21:31:21
【问题描述】：

当我将 iframe 代码直接粘贴到 TinyMCE 的源代码视图中并单击保存时，会将代码更改为：

保存后查看TinyMCE代码添加&lt;/p&gt;

<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">&lt;/p&gt;</iframe>

查看HTML页面的HTML源代码：

<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"/>

原始 iframecode

<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

这会影响页面布局的其余部分并破坏页脚。

如果有帮助，我正在使用 Silverstripe 2.4.5。

【问题讨论】：

标签： tinymce silverstripe

【解决方案1】：

TinyMCE 不太喜欢 iframe。至少有三个（或多或少）快速修复：

如果只针对谷歌地图且始终处于固定位置，可以使用Addressable模块：http://deadlytechnology.com/silverstripe/google-map-module/
如果仅适用于 Google 地图，但仅适用于 $Content 字段中的任何位置，您可能需要尝试短代码：http://www.ssbits.com/tutorials/2010/2-4-using-short-codes-to-embed-a-youtube-video/
在 onBeforeWrite() 方法中修复 TinyMCE 在服务器端的混乱：http://www.silverstripe.org/general-questions/show/16438#post305472

如果可以使用2.，看一个完整的例子：

【讨论】：

哇，你在这里的回答让我大吃一惊。我决定采用最简单的修复 3 并且工作得很好。谢谢

【解决方案2】：

实际上最简单的解决方案是在 TinyMCE 中单击小 HTML 图标（在锚点旁边），然后将 iframe 代码粘贴到那里。这样它就不会将html标签替换为&lt;/p&gt;

【讨论】：