How do I preview the result of a shortcode in the TinyMCE editor?

2 comments

1. I have just spent 24 hours attempting the same implementation, but with a more elaborate styled preview of results. Basically like a layout builder using shortcodes.

   Wish I would have found this post earlier cause it lays the groundwork for the first objective (using TinyMCE for point & click selection of shortcode attributes):

   The second part of your question you’ll have to accomplish on your own, as I found zero help in the form of tutorials/guidance and for good reason; found many premium themes using this as selling point. You can strip the preview functionality from a woothemes plugin called “shortcode-ninja,” but it will attempt to force you to use a woo theme.

   I’m not fluent with tinymce, thickbox, or any real code obfuscation (which I’m assuming the plugin is attempting.) Though it may be a breeze for any actual coder.

   tinymce shortcodes plugin
   shortcode previews plugin

   Ok I will attempt to improve my answer as per s_ha_dum’s suggestion.

   I’ve spent a lot of time already fooling around with this, so this answer is a shotgun approach. Please feel free to edit it if it doesn’t conform to format guidelines, etc.

   ---

   To stop the plugin from checking for a wootheme you’ll need to find entries such as these:

   $woo_framework_version = get_option('woo_framework_version');
   
   $MIN_VERSION = '2.9';
   
   $meetsMinVersion = version_compare($woo_framework_version, $MIN_VERSION) >= 0;
   
   $woo_shortcode_css = dirname(__FILE__) .  '/../../../themes/' 
                                      . basename(get_template_directory())
                                      . '/functions/css/shortcodes.css';
                                      $isWooTheme = file_exists($woo_shortcode_css);
   
   <?php if ( $meetsMinVersion && $isWooTheme ) { ?>
   
   <?php  }  else { ?>
   
   <div id="scn-options-error">
   
   <?php } else { ?>
   

   Looks like your active theme is not from WooThemes. Shortcode Ninja
   only works with fights for themes from
   WooThemes.

   What to do now?

   Pick a fight: (1) If you already have a theme from WooThemes, install
   and activate it or (2) if you don’t yet have one of the awesome
   WooThemes head over to the “nowdeadwebsiteaffiliatelink” and get one.

   Anyway just getting around the theme check didn’t do much that I recall. You’ll need to rewrite the code or reverse engineer? the code. It seemed to me like it was passing around way to many random variables, but honestly maybe that’s just how TinyMCE operates. I’m not too certain in this regard.

   Another thing I should mention is while hardcore researching for an answer such as this one, I found out that the whole wootheme exploit not too long ago was due to the code in this plugin. Which might be why there’s no longer a preview when using their shortcode generator like there was before. So make sure the code is actually safe before putting into production. Shortcode preview is a small luxury, but not if it comes with security vulnerabilities.

   WooThemes WooFramework exploit: Execute any shortcode as an
   unauthenticated visitor: gist.github.com/jasongill/2523147

   The cause of this is the following code in
   functions/js/shortcode-generator/preview-shortcode-external.php

   $shortcode = isset($_REQUEST['shortcode']) ? $_REQUEST['shortcode'] : '';
   
   $shortcode = strip_tags( stripslashes($shortcode) );
   
   echo do_shortcode($shortcode);
   

   The best answer I could give you, other than the actual updated plugin itself, is to look for kreisi’s modification of it which he includes in his premium wordpress themes. I also found someone selling similar plugin functionality on codecanyon. “vision shortcodes” or similiar.

   Googling this would probably serve you well:
   “VisualShortcodes.com (modified by Kriesi)”

   Please try to purchase a theme if you find his modifications useful.

   Edit 2: Found a really cool/unique implementation of thickbox with great styling, and point and click selection of fontawesome icon shortcode. Only preview is of the icons, but I thought it definitely warranted inclusion:

   http://themenectar.com/demo/salient/features/elements/ (available for purchase on themeforest)

   Log in to Reply

2. Replacing shortcodes in TinyMCE with a graphic:

   Log in to Reply