Creating a Preview Post Button for the Full-Screen TinyMCE/HTML Editor in WordPress
Photo By Bram Naus on Unsplash
Currently, some plugins and snippets found on WP blogs do not work for creating a Preview Post Button for the Full-Screen TinyMCE/HTML Editor in WordPress.
Jadi, Mangcoding memutuskan untuk berbagi tips cara Membuat Tombol Pratinjau Posting untuk Editor TinyMCE / HTML Layar Penuh pada WordPress tanpa Plugin. Ini cara kerjanya :
So, Mangcoding decided to share tips on how to create a Preview Post Button for the Full-Screen TinyMCE/HTML Editor in WordPress without using a plugin. Here’s how it works:
You can add this cool button to the full-screen editor in just 2 easy steps. Please follow these steps :
Step 1 – jQuery
First, you need to create a .js file and place it somewhere in your current theme directory. For example, you can create an admin.preview.js file and place it in the wp-content/themes/rudrastyh_test/js folder. Then, insert the following 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 – Enqueue skrip
In this step, you need to include the .js file you just created into the ‘Add Post’ and ‘Edit Post’ pages in the WordPress admin area. Insert the following code into your current theme’s functions.php file.
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');Adding Additional Code to functions.php
If you don’t find easy installation instructions, you can skip the steps above and simply insert the following code into 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'); }That’s the explanation of Creating a Preview Post Button for the Full-Screen TinyMCE/HTML Editor in WordPress that Mangcoding can share. Hopefully, this article is useful and provides new insights for you. If you have constructive feedback or suggestions, feel free to leave a comment or contact us via email and Mangcoding’s social media.
Source : Rudrastyh.com