Tambahkan tombol shortcode penutup otomatis ke TinyMCE di WP 4.6

Saya terbiasa membuat shortcode yang bisa ditutup sendiri seperti:

// shortcode
function wpse_shortcode_example( $wpse_atts ) {

    // Attributes
    $wpse_atts = shortcode_atts(
        array(
            'foo' => 'bar',
            'width' => '100%',
            'height' => 'auto',
        ),
        $wpse_atts,
        'wpse'
    );

    // Return
    return '<embed 
             src="' . $wpse_atts['src'] . '"
             width="' . $wpse_atts['width'] . '"
             height="' . $wpse_atts['height'] . '";

}
add_shortcode( 'wpse', 'wpse_shortcode_example' );

tapi saya ingin mulai menambahkan ini ke TinyMCE. Saya telah melakukan beberapa pencarian tetapi semua hasil pencarian diberi tanggal atau menggunakan pendekatan yang tidak lagi direkomendasikan:

• Bagaimana cara menambahkan tombol kode pendek ke editor TinyMCE? : titik awal yang sangat baik tetapi pertanyaan itu dibuat pada tahun 2012.
• WordPress Shortcodes: Panduan Lengkap : artikel bagus tapi dari 2012 dan bisa digunakan query_posts()tetapi bisa di-tweak
• Panduan untuk Membuat Tombol WordPress Editor Anda Sendiri : adalah artikel yang bagus tetapi masih dari beberapa waktu yang lalu, 2013, tetapi tidak mencakup dasar-dasar atau dasar untuk menggunakan TinyMCE.

Saya tahu Pengembang masih dalam tahap awal tetapi Plugin Handbook hanya berbicara singkat tentang TinyMCE Enhanced Shortcodes dan Shortcode API dan add_shortcode()tidak menyebutkan TinyMCE.

Jadi ini mengarahkan saya ke pertanyaan saya. Apa prosedur dasar untuk mengubah shortcode yang ditutup sendiri menjadi tombol yang dapat diklik di editor TinyMCE?

Kami mulai dengan menambahkan Tombol TinyMCE khusus:

function add_mce_button_custom_em() {
    // check user permissions
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    // check if WYSIWYG is enabled
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'add_tinymce_plugin_custom_em' );
        add_filter( 'mce_buttons', 'register_mce_button_custom_em' );
    }
}
add_action('admin_head', 'add_mce_button_custom_em');

Kemudian kami mendeklarasikan dan mendaftarkan tombol baru:

// Declare script for new button
function add_tinymce_plugin_custom_em( $plugin_array ) {
    $plugin_array['custom_em'] = get_template_directory_uri() .'/plug/custom-em/custom-em.js';
    return $plugin_array;
}

// Register new button in the editor
function register_mce_button_custom_em( $buttons ) {
    array_push( $buttons, 'custom_em' );
    return $buttons;
}

Akhirnya, kami memutuskan tombol mana (lebih lanjut tentang tombol dapat ditemukan di Pemformatan Konten ) yang ingin kami tampilkan. Jelas, jika Anda memiliki UX dalam pikiran, Anda hanya akan menampilkan beberapa dari mereka, misalnya:

// TinyMCE: TinyMCE choose which buttons you want to display
function myformatTinyMCE( $in ) {
    $in['toolbar1'] = 'styleselect,bold,custom_em,blockquote,hr,aligncenter,link,unlink,spellchecker,undo,removeformat';
    return $in;
}
add_filter( 'tiny_mce_before_init', 'myformatTinyMCE' );

Seperti yang Anda lihat di add_tinymce_plugin_custom_emfungsi, kami mendeklarasikan file javascript di dalamnyaget_template_directory_uri() .'/plug/custom-em/custom-em.js'

Jadi buat custom-em.jsfile, dan kemudian Anda memiliki dua cara untuk melakukannya.

Anda dapat menggunakan format kode pendek berikut [shortcode foo="" bar=""]atau [shortcode][/shortcode].

Mari kita mulai dengan [shortcode foo="" bar=""]format:

(function() {
    tinymce.create('tinymce.plugins.custom_em', {
        init : function(ed, url) {
            ed.addButton('custom_em', {
                title : 'Custom EM',
                image : url+'/images/btn_custom_em.png',
                onclick : function() {
                    ed.execCommand(
                        "mceInsertContent",
                        false,
                        "[shortcode foo=\"\" bar=\"\"]"
                    );
                }
            });
        }
    });
    tinymce.PluginManager.add('custom_em', tinymce.plugins.custom_em);
})(); 

Seperti yang Anda lihat, kami menggunakan gambar sebagai ikon tombol. Anda dapat mengubahnya menjadi teks seperti yang dijelaskan dalam contoh di bawah ini.

Berikut ini adalah apa yang kami gunakan pada platform kami sendiri, yang membungkus seleksi menjadi <em class="whatever">hello world</em>:

(function() {
    tinymce.PluginManager.add('custom_em', function( editor, url ) {

        editor.on('init', function(e) {
            this.formatter.register('thetarget', {
                inline : 'em',
                classes : 'whatever'
            });
        });

        editor.addButton('custom_em', {
            text: 'Custom EM',
            icon: false,
            onclick : function() {
                var contents = editor.selection.getContent(),
                tags = jQuery(jQuery.parseHTML(contents)).find('em.whatever').andSelf();
                editor.formatter.toggle('thetarget');
            }
        });
    });
})(jQuery);

Silakan kirim hasil dan lakukan pengeditan. TinyMCE adalah wabah dan membutuhkan sakit kepala tetapi bisa diselesaikan secara kolaboratif.