CODEWITHSUNDEEP
tinymcesilverstripe
John Magnolia
John Magnolia

Reputation: 16823

Adding <iframe> into TinyMCE breaks the page layout

When I paste the iframe code directly into the source code view of TinyMCE and click save it changes the code to:

View TinyMCE code after saving adds </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>

View HTML source of HTML page:

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

Original iframecode

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

This is effecting the rest of the page layout and breaks the footer.

I am using Silverstripe 2.4.5 if this helps.

Upvotes: 1

Views: 2009

Answers (2)

Tomer Almog
Tomer Almog

Reputation: 3868

Actually the easiest solution is in the TinyMCE click the little HTML icon (next to the anchor) and then paste the iframe code there. This way it will not replace the html tags to &lt;/p&gt;

Upvotes: 0

xeraa
xeraa

Reputation: 10859

TinyMCE is not too much of an iframe fan. There are at least three (more or less) quick fixes:

  1. If it's only for Google maps and always at a fixed position, you can use the Addressable module: http://deadlytechnology.com/silverstripe/google-map-module/

  2. If it's only for Google maps but just anywhere in the $Content field, you might want to try short codes: http://www.ssbits.com/tutorials/2010/2-4-using-short-codes-to-embed-a-youtube-video/

  3. Fix TinyMCE's mess on the server side within the onBeforeWrite() method: http://www.silverstripe.org/general-questions/show/16438#post305472

If you can use 2., take a look at a complete example:

Upvotes: 2

Related Questions