Google Maps - Visual Editor Breaks It

[atomicjack]

If you add the Google Maps code script into the 'text' editor, save it, but then go back into the Visual Editor and play around a bit, it breaks the Google Map code.

Can we get this resolved and have some proper implementation for the Visual Editor to handle Google Maps script?

[dd32]

Can you clarify what code you're referring to is?
Would I be right in assuming it's the Iframe embed? for example:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28317.632414620704!2d153.0229399!3d-27.478471499999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b941082d4ab437d%3A0xea83932039f46a17!2sSouth+Bank+Parklands!5e0!3m2!1sen!2sau!4v1436358697320" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Can you further explain what you need to do to "break" it?

Additionally, see #23622 for supporting automatic embedding of the Share link.

[atomicjack]

This is the code that it renders in the text editor after the visual editor has broken it:

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

<div style="overflow: hidden; height: 500px; width: 600px;">
<div id="gmap_canvas" style="height: 500px; width: 600px;"></div>

<a id="get-map-data" class="google-map-code" href="http://www.map-embed.com">google maps</a>
</div>

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<div style="overflow: hidden; height: 500px; width: 600px;">
<div id="gmap_canvas" style="height: 500px; width: 600px;"></div>
<a id="get-map-data" class="google-map-code" href="http://www.map-embed.com">google maps</a>
</div>
<script type="text/javascript">// <![CDATA[
function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(52.1454123,-1.73884709999993),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(52.1454123, -1.73884709999993)});infowindow = new google.maps.InfoWindow({content:"<b>Warwickshire</b>
Warickshire
 Warwickshire" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
// ]]></script>

Originally the code was:

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><div style="overflow:hidden;height:500px;width:600px;"><div id="gmap_canvas" style="height:500px;width:600px;"></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://www.map-embed.com" id="get-map-data">google maps</a></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(52.1454123,-1.73884709999993),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(52.1454123, -1.73884709999993)});infowindow = new google.maps.InfoWindow({content:"<b>Warwickshire</b><br/>Warickshire<br/> Warwickshire" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>   

[iseulde]

Are scripts kept by the visual editor? For me they're always removed. In any case, the visual editor is not made for this. Either don't use it or use the views api/shortcodes.

[atomicjack]

You are correct, the visual editor is not made for this. But, it wasn't the visual editor I originally used.

I use the text editor for scripts, etc. Then for normal posts/pages, I use the visual editor, but if I then go to a page with the scripts, and forgot to disable the visual editor before loading it, it messes everything up.

[atomicjack]

2nd opinion requested, re: my above reply.

[iseulde]

Okay, it appear the scripts were being removed in trunk, which is now restored in [33414].

[iseulde]

@atomicjack: Please test.

[iseulde]

Excluded style tags too and it should be faster than the first patch.

[atomicjack]

Will test later today. Thanks for the patch.

[atomicjack]

Replying to iseulde:

Tested on the latest 4.3.1 trunk, it breaks the map code entirely now, so that it doesn't display on the page, converts it into:

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

<div style="overflow: hidden; height: 500px; width: 600px;">

<div id="gmap_canvas" style="height: 500px; width: 600px;"></div>

<a id="get-map-data" class="google-map-code" href="http://www.map-embed.com">google maps</a>
</div>

<script type="text/javascript">// <![CDATA[
function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(52.1454123,-1.73884709999993),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(52.1454123, -1.73884709999993)});infowindow = new google.maps.InfoWindow({content:"<b>Warwickshire</b>
Warickshire
 Warwickshire" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
// ]]></script>

It works fine if you save it via the Text Editor and only ever use the text editor, but if you ever open it by mistake in Visual, you've broken it.

[azaozz]

32923.3.patch works quite well. It preserves both script and style tags inside the editor and makes them "visible" and possible to delete (replaces with placeholder images).

May need a bit of polishing like making the placeholder a bit more prominent/bigger, adding a class with the tag name, moving the placeholder styling to the editor css, perhaps having a title with the tag name so it shows a tooltip, perhaps can have different icon depending on the tag (script or style), etc.

[azaozz]

Lest patch this.

[azaozz]

In 32923.4.patch: refreshed 32923.3.patch and added a title on the placeholder image with the tag name.

[azaozz]

In 32923.5.patch: another small refresh and fixed a bug in the regex to select "empty" script tags.

[azaozz]

In 38039:

TinyMCE: preserve <script> and <style> tags inside the editor.
Uses image placeholders for the tags and makes then visible. That way the tags can also be deleted from inside the editor.

Props iseulde, azaozz.
Fixes #32923.