Wordpress shortcode preview in tinyMCE

Question

I've written a shortcode and its functioning like it should. Now the hard part:

I would like to show the user a preview already in the tinyMCE editor. Loading CSS in the editor is not a problem for me, but i would love to know if it is possible to already process the shortcode within TinyMCE.

Thanks!

Answer 1

Let the code talk: I'll put a code to add a visual icon for highlight content word(s) shortcode, and you can then implement any other shortcode you want with the same logic,

     class spot_shortcodes {

      function spot_shortcodes() 
{   

    add_action('init', array(&$this, 'init'));
}
function init(){

    // Enable shortcodes in text widgets
    add_filter( 'widget_text', 'do_shortcode' );

    // Fix for large posts, http://core.trac.wordpress.org/ticket/8553
    @ini_set( 'pcre.backtrack_limit', 500000 );
    // init process for button control
    add_filter( 'tiny_mce_version', 'my_refresh_mce');

   // Add only in Rich Editor mode
   if ( get_user_option('rich_editing') == 'true') {
     add_filter('mce_buttons_3', array(&$this, 'register_highlight_button'));
   }    
}

    // Add your button plugin js code to tinyMCE
    // codex: wp_register_script( $handle, $src, $deps, $ver, $in_footer );
    wp_register_script( 'effects-highlight', SPOT_SHORTCODES_URL . '/js/jquery.effects.highlight.js', false ,SPOT_SHORTCODES_URL, true );

   function add_youtube_button() {

   // Don't bother doing this stuff if the current user lacks permissions
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;

   // Add only in Rich Editor mode
   if ( get_user_option('rich_editing') == 'true') {
     add_filter("mce_external_plugins", array(&$this, "add_youtube_tinymce_plugin"));
     add_filter('mce_buttons', array(&$this, 'register_highlight_button'));
   }
}

    // function to register you button to tinyMCE dashboard
    function register_highlight_button($buttons) {
   array_push($buttons, "|", 'highlight_button');
   return $buttons;
}

    function add_youtube_tinymce_plugin($plugin_array) {

    // your icon image(highlight.png) which will be displayed in the tinyMCE dashboard
    $plugin_array['highlight'] = SPOT_TINYMCE_URL . '/icons-lib-custom.js';

   return $plugin_array;
}

} // class end
// Finally make an object from your button
$spot_shortcodes = new spot_shortcodes();

Our js code for the highlight button option make an dot js file put the followin code in it and put it in the tinyMCE plugin directory

// dont forget to change the paths
tinymce.create('tinymce.plugins.highlight', {
    // creates control instances based on the control's id.
    // our button's id is "highlight_button"
    createControl : function(id, controlManageradel) {
        if (id == 'highlight_button') {
            // creates the button
            var button = controlManageradel.createButton('highlight', {
                title : 'Add a Hightlight Text', // title of the button
                image :spotShortcodes.plugin_folder +"/tinymce/images/highlight.png",  // path to the button's image
                onclick : function() {
                    // triggers the thickhighlight
                    var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
                    W = W - 80;
                    H = H - 84;
                    tb_show( 'Insert text box shortcode', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=highlight-form' );
                }
            });
            return button;
        }
        return null;
    }
});

// registers the plugin. DON'T MISS THIS STEP!!!
tinymce.PluginManager.add('highlight', tinymce.plugins.highlight);
// executes this when the DOM is ready
jQuery(function(){
    // creates a form to be displayed everytime the button is clicked
    // you should achieve this using AJAX instead of direct html code like this
    var form = jQuery('<div id="highlight-form"><table id="highlight-table" class="form-table" style="text-align: left">\
         \
            \
        <tr>\
        <th><label class="title" for="highlight-bg">Highlight color</label></th>\
            <td><select name="bg" id="highlight-bg">\
                <option value="#f02d33">Red</option>\
                <option value="#b6bbbd">Grey</option>\
                <option value="#3e3c3c">Darkgrey</option>\
                <option value="#99cc33">Lightgreen</option>\
                <option value="#6c8c2d">Darkgreen</option>\
                <option value="#0f5ac6">Blue</option>\
                <option value="#3cbcf7">Cyan</option>\
                <option value="#9219f8">Purple</option>\
                <option value="#fcc016">Yellow</option>\
                <option value="#f65e0e">Orange</option>\
            </select><br />\
        <div class="info"><small>Select box type.</small></div></td>\
        </tr>\
        <tr>\
        <th><label class="title" for="highlight-contet">Conent</label></th>\
            <td><textarea rows="7"\ cols="45"name="content" id="highlight-content">hightlight text</textarea>\
                 <br />\
            <div><small>this text displayed in box.</small></div></td>\
        </tr>\
        </table>\
    <p class="submit">\
        <input type="button" id="highlight-submit" class="button-primary" value="Insert shortcode" name="submit" style=" margin: 10px 150px 50px; float:left;"/>\
    </p>\
    </div>');

    var table = form.find('table');
    form.appendTo('body').hide();

    // handles the click event of the submit button
    form.find('#highlight-submit').click(function(){
        // defines the options and their default values
        // again, this is not the most elegant way to do this
        // but well, this gets the job done nonetheless
        var options = { 
            'bg'     : '#f02d33',
            'content'  : 'hightlight text',
            };

        var shortcode = '[highlight ';

        for( var index in options) {
            var value = table.find('#highlight-' + index).val();

            // attaches the attribute to the shortcode only if it's different from the default value
            if ( value !== options[index] & index !== 'content')
                shortcode += ' ' + index + '="' + value + '"';
        }

        shortcode += ']'+ value + '[/highlight]'  

        // inserts the shortcode into the active editor
        tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

        // closes Thickhighlight
        tb_remove();
    });
});

I hope this help, give me you feedback if you want any more explanation, thanks.