Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Working on a project where I would like to have buttons within the actual visual editor area where the user can click on the placeholder image and it brings up the upload dialog.

I've seen that people create their own buttons that adds boxes that the user then should select with their mouse and then click the add media upload. To me that seems like it's bound for a bad user experience. Thus I'm looking to see if someone have seen a plugin that does this.

http://s-plugins.wordpress.org/visual-editor-custom-buttons/assets/screenshot-4.png?rev=641514

Imaging that you could actually click "insert image here" and have an upload dialog brought up.

share|improve this question
2  
This would be somewhat difficult, a better option for heavily formatted posts is to forgo the default wysiwyg and use custom fields. –  Wyck Jan 27 '13 at 23:16
2  
such an answer would likely become unworkable/unusable after a WordPress update, as TinyMCE get updated and APIs change –  Tom J Nowell Jan 28 '13 at 0:07

1 Answer 1

up vote 2 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.