image_send_to_editor filter is not fired when an Image is edited or replaced in TinyMce

[nicola.peluchetti]

image_send_to_editor filter should be called every time an image is modified/replaced in TinyMce, right now it looks like it's called only when the image is inserted.

To replicate

add_filter( 'image_send_to_editor', 'remove_width_attribute' , 10 );
public static function remove_width_attribute( $html ) {

$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;

}

Add an image with TinyMce. The Html will have no height/width attributes. Edit the added image, change the "Link To" for example and update it, the html will have height/width and the filter is not called.

[nicola.peluchetti]

The correct code to replicate is

<?php
add_filter( 'image_send_to_editor', 'remove_width_attribute' , 10 );
function remove_width_attribute( $html ) {
  $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
  return $html;
}

[joemcgill]

Hi @nicola.peluchetti,

Thanks for the report. @adamsilverstein is this something you're interested in picking up in 4.7?

[adamsilverstein]

Sure @joemcgill I can take a look!

[adamsilverstein]

@nicola.peluchetti

Hi! Thanks for the bug report.

Indeed you are correct, the image_send_to_editor filter is only fired when you insert an image from the media model and could be named more clearly. It is called on the initial insert to construct the HTML for the inserted image. Once we have an image, the edit functionality runs entirely in JavaScript and when you edit image attributes, the editor's existing HTML image element is updated in place - PHP is never called. So in a way this is expected, if poorly documented behavior.

To filter the update image attributes, you'll need to switch over to JavaScript...

Once an image is inserted into the tinymce editor, media editing with the wp media modal is handled in wp-includes/js/tinymce/plugins/wpeditimage/plugin.js. In the media model, when the user clicks the 'Update' button, the model change triggers a state update and winds up calling the plugin updateImage function to update the editor HTML with any new image attributes.

Immediately after the image is updated in the editor, we trigger a convenient event:

wp.media.events.trigger( 'editor:image-update', {
	editor: editor,
	metadata: imageData,
	image: imageNode
} );

You can hook in here to redo the logic you are accomplishing in PHP... For example, to remove the width/height attributes of the edited image (using tinymce's jQuery object here):

if ( wp.media.events ) {
	wp.media.events.on( 'editor:image-update', function( data ) {
		data.editor.$( data.image ).attr( { 'width':  null,  'height': null } );
	} );
}

Will this type of hook suffice for your needs? Regarding the filter - one thing we could do here is to update the docs describing how this filter can be used and when it fires. Care to provide a patch to update the docs?

[nicola.peluchetti]

Replying to adamsilverstein:
Hi @adamsilverstein, thanks for looking into this.
I think that the Javascript solution you proposed is appropriate, could that solution work even on the first insert and not only on edity? I'm asking because it would make more sense to have the code and the logic only in one place instead of sharing it between PHP and JS.

@nicola.peluchetti

Hi! Thanks for the bug report.

Indeed you are correct, the image_send_to_editor filter is only fired when you insert an image from the media model and could be named more clearly. It is called on the initial insert to construct the HTML for the inserted image. Once we have an image, the edit functionality runs entirely in JavaScript and when you edit image attributes, the editor's existing HTML image element is updated in place - PHP is never called. So in a way this is expected, if poorly documented behavior.

To filter the update image attributes, you'll need to switch over to JavaScript...

Once an image is inserted into the tinymce editor, media editing with the wp media modal is handled in wp-includes/js/tinymce/plugins/wpeditimage/plugin.js. In the media model, when the user clicks the 'Update' button, the model change triggers a state update and winds up calling the plugin updateImage function to update the editor HTML with any new image attributes.

Immediately after the image is updated in the editor, we trigger a convenient event:

wp.media.events.trigger( 'editor:image-update', {
	editor: editor,
	metadata: imageData,
	image: imageNode
} );

You can hook in here to redo the logic you are accomplishing in PHP... For example, to remove the width/height attributes of the edited image (using tinymce's jQuery object here):

if ( wp.media.events ) {
	wp.media.events.on( 'editor:image-update', function( data ) {
		data.editor.$( data.image ).attr( { 'width':  null,  'height': null } );
	} );
}

Will this type of hook suffice for your needs? Regarding the filter - one thing we could do here is to update the docs describing how this filter can be used and when it fires. Care to provide a patch to update the docs?

[adamsilverstein]

Replying to nicola.peluchetti:

Replying to adamsilverstein:
Hi @adamsilverstein, thanks for looking into this.
I think that the Javascript solution you proposed is appropriate, could that solution work even on the first insert and not only on edity? I'm asking because it would make more sense to have the code and the logic only in one place instead of sharing it between PHP and JS.

I looked into this and I think php may be the simplest bet for the insert which is handled quite separately from an edit of existing content. looking at wp.media.editor.insert i do see that you can override the default behavior by creating a (global) window.send_to_editor function, but the code would need to be completely different and we don't fire any type of event here you can hook into other than possibly mceInsertContent.

Good luck!

[adamsilverstein]

In 34823.diff​:

• update inline docs for the image_send_to_editor filter to better describe when it is fired

[joemcgill]

In 38734:

Media: Improve docs for image_send_to_editor filter.

This updates inline docs for the image_send_to_editor filter to better
describe when it is fired.

Props adamsilverstein.
Fixes #34823.