Wordpress shortcode preview in tinyMCE

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 optionmake an dot js file put the followin code in it and put it in the tinyMCE plugin directory

// dont forget to change the pathstinymce.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 readyjQuery(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.