T5 Post Preview Metabox See the post preview on the edit page

post-preview-metabox.php

<?php
/**
 * Plugin Name: T5 Post Preview Metabox
 * Description: See the post preview on the edit page
 * Plugin URI:
 * Version:     2013.02.04
 * Author:      Thomas Scholz
 * Author URI:  http://toscho.de
 * Licence:     MIT
 * License URI: http://opensource.org/licenses/MIT
 */

foreach ( get_post_types( array ( 'show_ui' => TRUE ) ) as $t5_pt )
	add_action( "add_meta_boxes_$t5_pt", 't5_add_preview_metabox' );

unset( $t5_pt );

/**
 * Register metabox and print script actions.
 *
 * @wp-hook add_meta_boxes
 * @return  void
 */
function t5_add_preview_metabox()
{
	add_meta_box( 't5_preview_post', 'Preview', 't5_render_preview_metabox' );
	add_action( 'admin_footer-post-new.php', 't5_print_preview_script' );
	add_action( 'admin_footer-post.php',     't5_print_preview_script' );
}

/**
 * Render the iframe.
 *
 * @param  object $post
 * @return void
 */
function t5_render_preview_metabox( $post )
{
	if ( ! isset ( $post->ID ) )
		return;


	$link = set_url_scheme( get_permalink( $post->ID ) );
	$link = add_query_arg( 'preview', 'true', $link );
	$link = apply_filters( 'preview_post_link', $link );
	$preview_link = esc_url( $link );

	$initial = 'auto-draft' === $post->post_status ? 'about:blank' : $preview_link;
?>
<style scoped>
#t5_resizable {
	height: 400px;
	margin: -6px -12px -8px -10px;
}
#t5_preview_iframe {
	width:  100%;
	height: 100%;
}
</style>
<div id="t5_resizable" class="ui-widget-content">
<iframe data-permalink="<?php echo $preview_link; ?>" src="<?php echo $initial; ?>" id="t5_preview_iframe"></iframe>
</div>
<?php
}

/**
 * Print JavaScript snippet.
 *
 * @wp-hook admin_footer-post-new.php
 * @wp-hook admin_footer-post.php
 * @return  void
 */
function t5_print_preview_script()
{
	# wp-includes/js/autosave.js
?>
<script>
/* reduce delay for development
autosaveL10n.autosaveInterval = 10; /**/
jQuery(function($) {
	$('#t5_resizable').resizable({ helper: "ui-resizable-helper" });
});
var lastSaved = "";
jQuery(document).ajaxStop(function() {
	if ( "" == autosaveLast || lastSaved == autosaveLast )
		return;

	var iframe = document.getElementById('t5_preview_iframe');
	iframe.src = jQuery(iframe).data( "permalink" );
	lastSaved  = autosaveLast;
});
</script>
<?php
}