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

Question

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

保存后查看TinyMCE代码会添加</p>

<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。

Answer 1

TinyMCE对于iframe粉丝来说并不算太多。至少有三个（或多或少）快速修复：

1. 如果仅适用于Google地图并且始终位于固定位置，则可以使用可寻址模块：http://deadlytechnology.com/silverstripe/google-map-module/

2. 如果仅适用于Google地图，而只是$Content字段中的任何位置，您可能需要尝试使用简短代码：http://www.ssbits.com/tutorials/2010/2-4-using-short-codes-to-embed-a-youtube-video/

3. 使用onBeforeWrite()方法在服务器端修复TinyMCE的混乱：http://www.silverstripe.org/general-questions/show/16438#post305472

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

• PHP代码：https://github.com/xeraa/silverstripe-book/blob/master/chapter-06/mysite/code/Page.php#L42
• 模板：https://github.com/xeraa/silverstripe-book/blob/master/chapter-06/mysite/templates/Includes/GMap.ss

Answer 2

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