Tambahkan tombol shortcode penutup otomatis ke TinyMCE di WP 4.6

11

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:

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?

DᴀʀᴛʜVᴀᴅᴇʀ
sumber
Jadi maksud Anda cara membuat tombol di editor TinyMCE yang menyuntikkan kode pendek yang menutup sendiri ke dalam konten?
birgire
1
@birgire Ya saya ingin tahu dasar untuk mengintegrasikan tombol kustom ke TinyMCE yang akan menambahkan kode pendek ke posting visual.
DᴀʀᴛʜVᴀᴅᴇʀ
1
Apakah Anda memeriksa jawaban yang bagus di sini oleh @bueltge?
birgire
@Birgire tidak, itu tidak kembali dari pencarian saya, tetapi itu adalah T&J yang bagus
DᴀʀᴛʜVᴀᴅᴇʀ

Jawaban:

14

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.

Christine Cooper
sumber