[wp-trac] [WordPress Trac] #34823: image_send_to_editor filter is not fired when an Image is edited or replaced in TinyMce

[WordPress Trac]

#34823: image_send_to_editor filter is not fired when an Image is edited or
replaced in TinyMce
-------------------------+-------------------------------------------------
 Reporter:               |       Owner:  adamsilverstein
  nicola.peluchetti      |      Status:  assigned
     Type:  defect       |   Milestone:  4.7
  (bug)                  |     Version:  4.3.1
 Priority:  normal       |  Resolution:
Component:  Media        |     Focuses:  ui, javascript, docs,
 Severity:  normal       |  administration
 Keywords:  needs-docs   |
-------------------------+-------------------------------------------------
Changes (by adamsilverstein):

 * keywords:   => needs-docs
 * focuses:  ui, javascript, administration => ui, javascript, docs,
     administration


Comment:

 @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
 [https://core.trac.wordpress.org/browser/tags/4.6/src/wp-includes/js
 /media-views.js#L5043 state update] and winds up calling the plugin
 [https://core.trac.wordpress.org/browser/tags/4.6/src/wp-
 includes/js/tinymce/plugins/wpeditimage/plugin.js#L356 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):

 {{{
 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?

--
Ticket URL: <https://core.trac.wordpress.org/ticket/34823#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform