เพิ่มปุ่มย่อปิดตัวเองลงใน TinyMCE ใน WP 4.6

ฉันคุ้นเคยกับการสร้างรหัสย่อที่ปิดตัวเองเช่น:

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

แต่ฉันต้องการเริ่มเพิ่มสิ่งเหล่านี้ลงใน TinyMCE ฉันได้ทำการค้นหาหลายครั้ง แต่ผลลัพธ์การค้นหาทั้งหมดเป็นวันที่หรือใช้วิธีการที่ไม่แนะนำอีกต่อไป:

• จะเพิ่มปุ่มย่อในตัวแก้ไข TinyMCE ได้อย่างไร? : จุดเริ่มต้นที่ยอดเยี่ยม แต่คำถามถูกสร้างขึ้นในปี 2012
• WordPress ย่อ: คู่มือที่สมบูรณ์ : บทความที่ดี แต่จากปี 2012 และใช้query_posts()แต่อาจถูกปรับแต่ง
• คำแนะนำเกี่ยวกับการสร้างปุ่มตัวแก้ไข WordPress ของคุณเอง : เป็นบทความที่ดี แต่ยังคงเกิดขึ้นเมื่อไม่นานมานี้ 2013 แต่ไม่ครอบคลุมพื้นฐานหรือพื้นฐานในการใช้ TinyMCE

ฉันรู้ว่านักพัฒนายังอยู่ในช่วงเริ่มต้น แต่คู่มือปลั๊กอินพูดสั้น ๆ เกี่ยวกับย่อย่อ TinyMCE Enhancedและย่อรหัส APIและadd_shortcode()ไม่พูดถึง TinyMCE

ดังนั้นสิ่งนี้ทำให้ฉันคำถามของฉัน ขั้นตอนพื้นฐานสำหรับการเปลี่ยนรหัสย่อที่ปิดตัวเองให้เป็นปุ่มที่คลิกได้ในตัวแก้ไข TinyMCE คืออะไร

เราเริ่มต้นด้วยการเพิ่มปุ่ม TinyMCE ที่กำหนดเอง:

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

จากนั้นเราประกาศและลงทะเบียนปุ่มใหม่:

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

สุดท้ายเราตัดสินใจว่าปุ่มใด (สามารถพบปุ่มเพิ่มเติมได้ที่การจัดรูปแบบเนื้อหา ) ที่เราต้องการแสดง เห็นได้ชัดว่าถ้าคุณมี UX ในใจคุณจะแสดงเพียงไม่กี่ตัวอย่างเช่น:

// 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_emฟังก์ชั่นเรากำลังประกาศไฟล์จาวาสคริปต์ภายในget_template_directory_uri() .'/plug/custom-em/custom-em.js'

ดังนั้นสร้างcustom-em.jsไฟล์แล้วคุณมีสองวิธีที่จะไปเกี่ยวกับเรื่องนี้

ทั้งที่คุณสามารถไปกับรูปแบบรหัสต่อไปนี้หรือ[shortcode foo="" bar=""][shortcode][/shortcode]

เริ่มจาก[shortcode foo="" bar=""]รูปแบบ:

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

อย่างที่คุณเห็นเราใช้รูปภาพเป็นไอคอนปุ่ม คุณสามารถเปลี่ยนเป็นข้อความตามที่ระบุไว้ในตัวอย่างด้านล่าง

ต่อไปนี้คือสิ่งที่เราใช้บนแพลตฟอร์มของเราเองซึ่งจะครอบคลุมการเลือก<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);

กรุณาโพสต์ผลลัพธ์และทำการแก้ไข TinyMCE เป็นโรคระบาดและต้องปวดหัว แต่สามารถแก้ไขได้ในลักษณะการทำงานร่วมกัน