Thêm nút shortcode tự đóng vào TinyMCE trong WP 4.6

Tôi quen với việc tạo các mã ngắn tự đóng như:

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

nhưng tôi muốn bắt đầu thêm chúng vào TinyMCE. Tôi đã thực hiện một số tìm kiếm nhưng tất cả các kết quả tìm kiếm đều có niên đại hoặc sử dụng một phương pháp không còn được khuyến nghị:

• Làm cách nào để thêm nút shortcode vào trình chỉnh sửa TinyMCE? : điểm khởi đầu tuyệt vời nhưng câu hỏi đã được tạo ra vào năm 2012.
• WordPress Shortcodes: Hướng dẫn đầy đủ : bài viết hay nhưng từ năm 2012 và nó sử dụng query_posts()nhưng có thể được điều chỉnh
• Hướng dẫn tạo các nút chỉnh sửa WordPress của riêng bạn : là một bài viết hay nhưng vẫn còn một thời gian trước, 2013, nhưng nó không bao gồm những điều cơ bản hoặc nền tảng để sử dụng TinyMCE.

Tôi biết Nhà phát triển vẫn đang ở giai đoạn đầu nhưng Sổ tay Plugin chỉ nói ngắn gọn về Mã ngắn và API mã ngắn được cải tiến của TinyMCE và add_shortcode()không đề cập đến TinyMCE.

Vì vậy, điều này dẫn tôi đến câu hỏi của tôi. Quy trình cơ bản để biến một mã ngắn tự đóng thành nút có thể nhấp trong trình chỉnh sửa TinyMCE là gì?

Chúng tôi bắt đầu bằng cách thêm Nút TinyMCE tùy chỉnh:

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

Sau đó, chúng tôi tuyên bố và đăng ký nút mới:

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

Cuối cùng, chúng tôi quyết định các nút nào (có thể tìm thấy nhiều nút hơn tại Định dạng nội dung ) mà chúng tôi muốn hiển thị. Rõ ràng, nếu bạn có UX trong đầu, bạn sẽ chỉ hiển thị một vài trong số họ, ví dụ:

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

Như bạn có thể thấy trong add_tinymce_plugin_custom_emhàm, chúng tôi đang khai báo một tệp javascript bên trongget_template_directory_uri() .'/plug/custom-em/custom-em.js'

Vì vậy, tạo custom-em.jstập tin, và sau đó bạn có hai cách để đi về điều này.

Hoặc bạn có thể đi với định dạng shortcode sau [shortcode foo="" bar=""]hoặc [shortcode][/shortcode].

Hãy bắt đầu với [shortcode foo="" bar=""] định dạng:

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

Như bạn có thể thấy, chúng tôi sử dụng một hình ảnh làm biểu tượng nút. Bạn có thể thay đổi nó thành văn bản như được nêu trong ví dụ dưới đây.

Sau đây là những gì chúng tôi sử dụng trên nền tảng của riêng mình, nó bao bọc lựa chọn thành: <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);

Vui lòng gửi kết quả và thực hiện chỉnh sửa. TinyMCE là một bệnh dịch và đòi hỏi đau đầu nhưng có thể được giải quyết theo cách hợp tác.