Solusi untuk membuat Shortcode di Admin Editor

Saya telah menanyakan pertanyaan ini sekitar setahun yang lalu dan saya berharap ada beberapa jenis solusi sederhana yang akan memungkinkan saya mencapai tujuan saya. Jadi begini:

Saya sering menggunakan kode pendek dalam Editor Admin tetapi ketika saya menyerahkannya kepada klien, mereka sering tidak mengerti cara kerjanya.

Apa yang saya cari adalah solusi yang secara otomatis akan membuat output yang terkait dari shortcode dalam admin admin WYSIWYG.

Dari perspektif visual, saya ingin ini ditampilkan serupa ketika garis "lebih" muncul atau ketika gambar ditampilkan dalam editor. Maksud saya, pengguna akan melihat output tetapi hanya akan dapat menghapusnya tetapi tidak mengedit konten dari shortcode yang diberikan.

Sebenarnya tidak terlalu buruk untuk melakukan apa yang Anda minta. Ini akan membawa Anda sekitar satu jam untuk melakukan yang pertama, dan 10 menit untuk melakukan yang berikutnya.

Pada akhirnya apa yang akan Anda lakukan adalah membuat plugin TinyMCE. Inilah yang harus Anda lengkapi dengan diri Anda sendiri untuk memulai:

1. Panduan umum untuk membuat plugin tinymce
2. Contoh kode dari WordPress Core
3. Panduan umum tentang menambahkan plugin TinyMCE ke WordPress. Saya menemukan ini , yang tampaknya memadai.

Anda sekarang memiliki semua alat untuk menyelesaikannya! Dari semua ini, kode yang paling menarik bagi Anda adalah blok ini dalam kode contoh WP:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

Di sini, kode pendek untuk galeri diganti dengan imgtag. The imgtag memiliki kelas wp-gallery, yang akan ditata oleh CSS ditemukan di sini .

Edit 2016-04-06: Konten dan tautan terbaru untuk TinyMCE 4 dan WordPress 4.4

Ini bukan jawaban yang lengkap, hanya arahan desain. Saya pikir pendekatan terbaik adalah sesuatu seperti ini:

Di pos edit admin

Rip semua kode pendek dari pos tersimpan dan render di dalam kotak metabox, selain dari editor . Buat shure mereka muncul dalam urutan yang sama seperti shortcode terjadi di Editor kecil.

Dalam API javascript tinyMCE

Membuat fungsi jQuery, ketika pengguna mengklik kode pendek, itu menukar HTML dari metabox ke editor. Dan sebaliknya. Urutan itu sendiri harus ok sebagai asosiasi, tetapi saya tidak yakin tentang melampirkan kode pendek. Namun ada banyak cara untuk mendesain koneksi ID yang bagus. Pembaruan kode pendek dapat dilakukan dengan cepat menggunakan ajax.

Jangan pernah menyimpan status kode pendek yang diberikan

Sebelum beralih editor, simpan konsep, autodraft, dan publikasikan, buat panggilan API untuk memicu pemulihan, sehingga status kode pendek yang diberikan tidak pernah disimpan ...

Ini bisa dilakukan, tetapi Anda harus terbiasa dengan API tinyMCE untuk memahami di mana dan kapan untuk mengakses konten editor, dan menghubungkan ke tindakan javascript sebelum 'save' dan banyak lagi.

Mungkin ada beberapa editor mungMCE pada pageload edit postingan yang sama.

Bagian pemulihan dapat diselidiki dengan melihat [gallery]kode pendek beaviour. Tetapi klik pada [MY_SHORTCODE]harus dilakukan oleh beberapa trik jQuery.

di skrip admin_footer, akses konten tempat kursor aktif dengan:

var $editor_content = $(tinymce.activeEditor.getBody());

adalah petunjuk bagaimana memulai.

Saya juga sedang mencari cara untuk menampilkan dan mengubah kode pendek. Dan sekarang, akhirnya, saya menemukan tutorial yang tidak persis seperti itu: https://generatewp.com/take-shortcodes-ultimate-level/

Saya menambahkan deskripsi sehingga mesin pencari mengambilnya:

Kita akan membuat plugin sederhana dengan kode pendek, lalu kita akan menambahkan tombol editor TinyMCE untuk menyisipkan kode pendek itu melalui popup yang akan mengumpulkan semua input pengguna untuk atribut kode pendek. Kemudian, kita akan mengganti kode pendek di editor TinyMCE dengan gambar placeholder, seperti galeri asli WordPress (yang sebenarnya adalah kode pendek, jika Anda tidak tahu), dan terakhir - kita akan mengizinkan pengeditan kode pendek dan atributnya dengan mengklik dua kali pada gambar placeholder.