WordPress Editor Image for Shortcode

Question

Quick question about WordPress. I've been Googling all over the place and cannot find an answer.

Basically I'm looking to replicate what happens when you add a gallery: have an image displayed as a stand in for the gallery shortcode [gallery]. The shortcode's visible when you go to edit HTML.

I'd like to exactly copy this effect: When a shortcode inserted into the editor I'd like for to to be rendered as an image.

Things I've Tried:

• Inserting an element (image, div, I found an input is pretty unfuckwithable, etc) that's wrapped by a shortcode (This works ok, not great. The short code's still visible and WP will auto add paragraphs to the element to create space that users could, possibly, add content that'll be eaten by the short code) -
• Inerting the short code as a < !-- --> comment (This also doesn't work great, WP will occassionally eat it moving between Visual/HTML. The comments ALSO eat your content < !-- [shortcode]--> placeholder < !--[/shortcode] --> = < !-- rendered shortcode -->)

That's the extent that I've thought of things. I cannot find a guide on how to do mimic the [gallery]'s behavior and can't find it by going through wp-admin's guts.

Thanks!

Answer 1

Alright, found the answer thanks to Dan's hint. Here's how to do it:

First (as Dan suggested) take a look at how they add the Gallery plugin to Tiny MCE. There's actually an uncompressed js file that will give you the overview you need, find it in:

/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin.dev.js

This goes over the basics on adding this type of plugin to TinyMCE (more info here). To get WP to load the .js file with your TinyMCE plugin, see this helpful guide.

Basically here's the code:

if ( get_user_option('rich_editing') == 'true') {
    add_filter("mce_external_plugins", "add_jolokia_tinymce_plugin");
//Applying the filter if you're using the rich text editor
}

function add_jolokia_tinymce_plugin($plugin_array) {
    $plugin_array['example'] =  '/path/to/example.js';
    return $plugin_array;
}

Add this to a plugin or function.php in a theme And you're good!