Membuat Tombol Pratinjau Posting untuk Editor TinyMCE / HTML Layar Penuh WordPress

Photo by Bram Naus on Unsplash

Untuk saat ini ada beberapa Plugin dan snippet yang ditemukan di blog WP tidak berfungsi untuk membuat Tombol Pratinjau Posting Editor TinyMCE / HTML Layar Penuh pada 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:

Editor mangcoding

Anda dapat memasang tombol keren ini ke editor layar penuh dalam 2 langkah mudah, silahkan perhatikan langkah berikut :

Langkah 1 – jQuery

Pertama-tama Anda harus membuat file .js dan meletakkannya di suatu tempat di direktori tema Anda saat ini, misalnya Anda membuat admin.preview.js file dan meletakkannya di wp-content/themes/rudrastyh_test/js folder.

Kemudian masukkan kode ini ke dalam file .js Anda :

 

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();
    }
  });
});

 

Langkah 2 – Enqueue skrip

Pada langkah ini Anda perlu memasukkan file .js yang baru saja Anda buat ke halaman «Tambah Posting» dan «Edit Posting» di area admin WordPress. Masukkan kode ini ke dalam functions.php tema WordPress Anda saat ini.

 

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');
 

 

Menambahkan kode Lain ke functions.php

Jika Anda tidak menemukan instruksi penginstalan yang mudah, Anda dapat melewati langkah-langkah di atas dan cukup masukkan kode di bawah ini ke dalam 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');
}

 

Itulah beberapa langkah yang bisa diikuti untuk menambahkan tombol pratinjau pada editor wordpress Anda, mudah-mudahan tips yang Mangcoding bagikan ini, bisa memberikan manfaat untuk semua.

Referensi : Rudrastyh