WP 4.6'da TinyMCE'ye kendiliğinden kapanan kısa kod düğmesi ekleme

Kendi kendine kapanan kısa kodlar oluşturmayı biliyorum:

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

ancak bunları TinyMCE'ye eklemeye başlamak istiyorum. Birkaç arama yaptım, ancak tüm arama sonuçları tarihli veya artık önerilmeyen bir yaklaşım kullanıyor:

• TinyMCE editörüne kısa kod düğmesi nasıl eklenir? : mükemmel bir başlangıç ​​noktası ancak soru 2012'de oluşturuldu.
• WordPress Kısa Kodları: Tam Bir Kılavuz : iyi bir makale ancak 2012'den itibaren kullanıyor ve query_posts()değiştirilebiliyor
• Kendi WordPress Editör Düğmelerinizi Oluşturma Kılavuzu : güzel bir makaledir, ancak yine de bir süre önce, 2013, ancak TinyMCE'yi kullanmak için temelleri veya temeli kapsamaz.

Geliştirici hala erken aşamalarında olduğunu biliyorum ama Eklenti El Kitabı sadece kısa bir süre TinyMCE Geliştirilmiş Kısa Kodlar ve Kısa Kod API hakkında konuşuyor ve add_shortcode()TinyMCE bahsetmiyorum.

Bu da beni soruma götürüyor. Kendiliğinden kapanan bir kısa kodu TinyMCE editöründe tıklanabilir bir düğmeye dönüştürmek için temel prosedür nedir?

Özel TinyMCE Düğmesini ekleyerek başlıyoruz:

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

Ardından yeni düğmeyi beyan ederiz ve kaydederiz:

// 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;
}

Son olarak, görüntülemek istediğiniz düğmelere ( İçerik Biçimlendirmesinde daha fazla düğme bulunabilir ) karar veririz. Açıkçası, aklınızda UX varsa, bunlardan sadece birkaçını görüntülersiniz, örnek:

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

add_tinymce_plugin_custom_emFonksiyonda görebileceğiniz gibi, içinde bir javascript dosyası beyan ediyoruzget_template_directory_uri() .'/plug/custom-em/custom-em.js'

custom-em.jsDosyayı oluşturun ve sonra bu konuda iki yolunuz var.

Aşağıdaki kısa kod biçimiyle [shortcode foo="" bar=""]ya da ile gidebilirsiniz [shortcode][/shortcode].

Şu [shortcode foo="" bar=""]formatla başlayalım :

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

Gördüğünüz gibi, düğme simgesi olarak bir görüntü kullanıyoruz. Bunu, aşağıdaki örnekte belirtildiği gibi metne dönüştürebilirsiniz.

Kendi platformumuzda kullandığımız şey şudur: seçimi sarar <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);

Lütfen sonuçları gönderin ve düzenlemeleri yapın. TinyMCE bir vebadır ve baş ağrısı gerektirir, ancak işbirlikçi bir şekilde çözülebilir.