WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#32923 closed defect (bug) (fixed)

Google Maps - Visual Editor Breaks It

Reported by: atomicjack Owned by: azaozz
Milestone: 4.6 Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords: has-patch
Focuses: administration Cc:

Description

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?

Attachments (6)

32923.patch (3.8 KB) - added by iseulde 5 years ago.
32923.2.patch (4.2 KB) - added by iseulde 5 years ago.
32923.3.patch (3.7 KB) - added by iseulde 5 years ago.
script-placeholder.png (6.4 KB) - added by azaozz 5 years ago.
32923.4.patch (3.6 KB) - added by azaozz 4 years ago.
32923.5.patch (3.9 KB) - added by azaozz 4 years ago.

Download all attachments as: .zip

Change History (26)

#1 @dd32
5 years ago

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.

#2 @atomicjack
5 years ago

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>   

#3 @iseulde
5 years ago

  • Keywords close added

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.

#4 @atomicjack
5 years ago

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.

#5 @atomicjack
5 years ago

  • Keywords 2nd-opinion added; close removed

2nd opinion requested, re: my above reply.

#6 @iseulde
5 years ago

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

#7 @iseulde
5 years ago

  • Component changed from Editor to TinyMCE

@iseulde
5 years ago

#8 @iseulde
5 years ago

@atomicjack: Please test.

#9 @iseulde
5 years ago

  • Keywords has-patch added; 2nd-opinion removed

@iseulde
5 years ago

#10 @iseulde
5 years ago

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

@iseulde
5 years ago

#11 follow-up: @iseulde
5 years ago

  • Milestone changed from Awaiting Review to Future Release
  • Version 4.2.2 deleted

#12 @atomicjack
5 years ago

Will test later today. Thanks for the patch.

#13 in reply to: ↑ 11 @atomicjack
5 years ago

  • Keywords needs-refresh added

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.

#14 @azaozz
5 years ago

  • Keywords needs-refresh removed

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.

#15 @azaozz
4 years ago

  • Milestone changed from Future Release to 4.6

Lest patch this.

@azaozz
4 years ago

#16 @azaozz
4 years ago

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

This ticket was mentioned in Slack in #core-editor by azaozz. View the logs.


4 years ago

This ticket was mentioned in Slack in #core-editor by iseulde. View the logs.


4 years ago

@azaozz
4 years ago

#19 @azaozz
4 years ago

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

#20 @azaozz
4 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.