Possible to create placeholder images in WordPress editor that are clickable (should bring up uploader)?

1 comment

1. such an answer would likely become unworkable/unusable after a WordPress update, as TinyMCE get updated and APIs change
   ^{– by @TomJNowell}

   While I agree with Tom, there still an be a general answer that explains the general concept and the parts that aren’t moving.

   The PHP plugin to set the default content

   First there has to be some default content. And there’s a filter for that:

   <?php
   /* Plugin Name: (#83397) Default TinyMCE Content */
   
   add_filter( 'default_content', 'wpse83397_add_editor_default_content' );
   public function wpse83397_add_editor_default_content( $content )
   {
       if ( "your_post_type" !== get_current_screen()->post_type )
           return $content;
   
       return sprintf(
           '<img src="%s" title="Placeholder" />', 
           plugin_dir_path( __FILE__ ).'placeholder.png'
       );
   }
   

   TinyMCE JS events

   Then you simply need to add an event listener. Example from the official documentation.

   tinymce.activeEditor.on( 'GetContent', function( e ) {
       console.log( e.content );
   } );
   

   The global WordPress wp object

   Finally, you just need to attach the media open dialog action to the content itself. There’s the wp object, that holds most of WordPress core js stuff. Just type wp into your console and you’ll see that you have global access after the DOM is ready to the following:

   • Backbone: Object
   • Uploader: function ( options )
   • ajax: Object
   • autosave: Object
   • heartbeat: Heartbeat
   • html: Object
   • media: function ( attributes )
   • shortcode: function ( options )
   • template: function

   As you can see, there’s media and Backbone as well. Just hit wp.media. into your (for e.g.) Chrome dev tools console and you’ll see the autocomplete function telling what’s available. Additionally to that, Dominik Schilling, the author of the media library has a nice set of demos for the WP Media library on GitHub.

   Log in to Reply