WordPress 在 WP 4.6 中將 self-closing 短碼按鈕新增到 TinyMCE

問題描述

我熟悉建立 self-closing 短碼，如：

// 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="'%20.%20$wpse_atts['src']%20.%20'"
             width="' . $wpse_atts['width'] . '"
             height="' . $wpse_atts['height'] . '";

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

但是我想開始將它們新增到 TinyMCE 中。我做了幾次搜尋，但所有的搜尋結果都是過時的或使用不再推薦的方法：

How to add a shortcode button to the TinyMCE editor?：出色的起點，但問題是在 2012 年建立的。
WordPress Shortcodes: A Complete Guide：好的文章，但從 2012 年開始，它使用 query_posts()，但可以調整
Guide to Creating Your Own WordPress Editor Buttons：是一篇很好的文章，但仍然是 2013 年以前的一段時間，但它並沒有涵蓋使用 TinyMCE 的基礎或基礎。

我知道開發人員還處於早期階段，但是外掛手冊只是簡單地談論 TinyMCE Enhanced Shortcodes 和 Shortcode API，而 add_shortcode()沒有提到 TinyMCE 。

所以這就導致我的問題。在 TinyMCE 編輯器中將 self-closing 短碼轉換為可點選按鈕的基本步驟是什麼？

最佳解決方案

我們首先新增自定義 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;
}

最後，我們決定要顯示哪些按鈕 (更多關於 Content Formatting 的按鈕) 。顯然，如果你有 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'中宣告一個 javascript 檔案

所以建立 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 是一個瘟疫，需要頭痛，但可以協同解決。

參考文獻

Add self-closing shortcode button to TinyMCE in WP 4.6

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 在 WP 4.6 中將 self-closing 短碼按鈕新增到 TinyMCE