Unfortunately the plugins and snippets which I found on the other WP blogs didn’t work for me. So, I decided to create the button by myself.

This is the working solution:

You can install this cool button to the fullscreen editor toolbar in 2 easy steps. Here they are:

Step 1. jQuery

First of all you should create a .js file and put it somewhere into your current theme directory, for example I created the admin.preview.js file and place it into wp-content/themes/rudrastyh_test/js folder.

Then insert this code into your .js file:

jQuery(function($) {
	$('#post-preview').clone()
		.removeAttr('id')
		.removeClass('preview')
		.addClass('right')
		.css('margin', '0 0 0 5px')
		.click(function(event) {
			/* copying the content into non-fullscreen editors */
			$('#title').val( $('#wp-fullscreen-title').val() );
			/* for HTML editor */
			if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-html-mode' ) ) {
				$('#content').val( $('#wp_mce_fullscreen').val() );
			/* for tinyMCE editor */
			} else if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-tmce-mode' ) ){
				tinyMCE.get('content').setContent(tinyMCE.get('wp_mce_fullscreen').getContent());
			}
			/* emulates click on the original preview button */
			$('#post-preview').click();
			event.preventDefault();
		})
		.insertBefore('#wp-fullscreen-save input.button-primary');
 
	/* this needs to fix the bug when post content didn't update after switching to TinyMCE or HTML */
	$('#wp-fullscreen-modes a').click(function(){
		if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-html-mode' ) ) {
				$('#content-html').click();
		} else if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-tmce-mode' ) ){
				$('#content-tmce').click();
		}
	});
});

Step 2. Enqueueing the script

In this step you need to include the .js file you’ve just created to the «Add Post» and «Edit Post» pages in the WordPress admin area. Insert this code into the functions.php of your current WordPress theme.

function mr_fullscreen_preview_button() {
	wp_enqueue_script('fullscreen-preview', get_stylesheet_directory_uri() . '/js/admin.previewbutton.js', array('jquery'), null, true);
}
 
add_action('admin_print_scripts-post-new.php', 'mr_fullscreen_preview_button');
add_action('admin_print_scripts-post.php', 'mr_fullscreen_preview_button');

…or just add the following code to the functions.php

If you didn’t find the install instruction easy, you can skip the above steps and just insert the below code into the functions.php:

if( !function_exists('mr_fullscreen_preview_button') ){
	function mr_fullscreen_preview_button() {
		$button = "<script>
		jQuery(function($) {
			$('#post-preview').clone().removeAttr('id').removeClass('preview').addClass('right').css('margin', '0 0 0 5px').click(function(e) { $('#title').val( $('#wp-fullscreen-title').val() ); if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-html-mode' ) ) { $('#content').val( $('#wp_mce_fullscreen').val() ); } else if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-tmce-mode' ) ){ tinyMCE.get('content').setContent(tinyMCE.get('wp_mce_fullscreen').getContent()); } $('#post-preview').click(); e.preventDefault(); }).insertBefore('#wp-fullscreen-save input.button-primary');
			$('#wp-fullscreen-modes a').click(function(){ if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-html-mode' ) ) { $('#content-html').click(); } else if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-tmce-mode' ) ){ $('#content-tmce').click(); }});
		});</script>";
		echo $button;
	}
 
	add_action('admin_footer-post-new.php', 'mr_fullscreen_preview_button');
	add_action('admin_footer-post.php', 'mr_fullscreen_preview_button');
}

I really hope that my preview button makes your life easier. If you have some questions, please leave your comment below.

Post Views: 484