Disappearing image captions on pasted images from Google Docs

[TobiasKjrsgaard]

When you paste an image from Google Docs the width and height attributes in the resulting <img> tag contains the three characters "px;" at the end as shown below:

<img alt="" src"(…)" width="200px;" height="150px;">

Having these three extra chars in the attribute fields somehow makes the filter that adds image captions fail. Whenever I try adding captions they turn up fine in the TinyMCE editor, but as soon as the post is published the caption is stripped from the string and I'm left with the original <img> tag.

I suspect that a solution could be a minor modification to image_add_caption() function i media.php - specifically the lines posted below. However, I'm not confident that my skills are adequate enough to implement this fix.

if ( ! preg_match( '/width=["\']([0-9]+)/', $html, $matches ) )
	return $html;

[ocean90]

Hello TobiasKjrsgaard, thanks for the report.

I could reproduce the issue in 3.8.1, but not in the current trunk. We have a new TinyMCE version and a new modal for adding a caption which seems to have fixed your mentioned issue.

Can you try this on the latest ​Nightly again and confirm that it's fixed please?

[bravokeyl]

I could (kind of) reproduced this on trunk..it's giving width and height as NaN and stripping out caption first time..When we change the height and width of image
it displays correctly

[TobiasKjrsgaard]

Thanks. I just tested this in the latest nightly build and it works like a charm… Sorry for the inconvenience.

[ericlewis]

I can't even copy and paste an image from Google Docs into WordPress. Is this expected behavior now?

Attaching a screencast.

[wonderboymusic]

Can you take a look?

I can copy paste from all over the place no problem, but Google Docs' images do get stripped.

4.0.21 Release Notes:
"and a bunch of bug fixes regarding paste from Word/Open office/Google docs etc."

[TobiasKjrsgaard]

Replying to wonderboymusic:

Can you take a look?

I can copy paste from all over the place no problem, but Google Docs' images do get stripped.

4.0.21 Release Notes:
"and a bunch of bug fixes regarding paste from Word/Open office/Google docs etc."

I just tested this in 4.0 and it seems that the bug is back :(

[kvignos]

WP 4.1 uses TinyMCE 4.1.6. It appears that this release of TinyMCE 4.1.6 does not support pasting from Google Docs. You can replicate the same behavior in the TinyMCE demo here:

​http://www.tinymce.com

Screencast attached.

This does not appear to be a WordPress Core bug.

Tried to report to TinyMCE but their bug report form doesn't seem to be working in Safari or Chrome.

[kvignos]

Screencast of bug in TinyMCE

[robbintt]

The bug is in the TinyMCE paste plugin. This can be verified by removing the word 'paste' from the plugins in this jsfiddle: ​http://jsfiddle.net/fc0rb8kh/5/

Deleting the paste plugin folder (effectively turning off the tinymce paste plugin) from wp-includes/js/tinymce/plugins/ fixes this bug.

It looks like this is either a paste configuration setting issue in wp-includes or an issue with the paste plugin in tinymce.

[azaozz]

As far as I understand, the problem is that TinyMCE 4.x disables pasting of image source (base64 encoded) inside the post text. This is a really bad practice. Makes the post huge and very inconvenient to load for the site visitors (1MB image is usually about 1.2MB base64 encoded, that's roughly 200,000 words), and is very search engine unfriendly. Also this is not supported in all browsers.

Images in Google Docs don't exist on the Internet. They are local to the document and cannot be inserted anywhere else by using the <img> tag. To properly use images from there, the users will have to upload them to their site and insert them into the post from the Media Library, same as any other image. This means there will be several more steps while writing but will ensure everything works well.

There are WordPress plugins that "catch" these base64 encoded images and save them properly, then replace them in the post content. If somebody needs to paste images from a word processor or Google Docs regularly, that would be the best solution.