WordPress shortcode preview in tinyMCE

1 comment

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.

   Log in to Reply