WordPress TinyMCE 初始化後的入隊指令碼

問題描述

我正在使用 jquery 在一個元框中製作一個小的即時預覽區域，我需要從 tinymce 編輯器獲取內容。但是，似乎我的指令碼在 tinymce 之前載入，當我嘗試從編輯器欄位獲取內容時，這將返回 null 。

排隊：

add_action('admin_enqueue_scripts', 'wpk_popup_admin_script', 100);

function wpk_popup_admin_script($hook) {
    global $post;
    if( 'edit.php' != $hook && $post->post_type != 'wpk_popup'  )
        return;

    if(is_admin()){
        wp_enqueue_script( 'jquery' );

        wp_register_script( 'wpk-popup-admin', plugins_url('/js/admin.js', __FILE__), array('jquery'), false, true);
        wp_enqueue_script( 'wpk-popup-admin' );
    }

}

試圖新增 editor 依賴，但它沒有用。指令碼在錫罐配置之前列印。

用於獲取編輯內容的 jQ 程式碼：

html += jQuery('#content_ifr').contents().find('#tinymce').html();

哪個返回 NULL 。

解決：

感謝 @birgire，我能夠解決這個問題。這是最後的程式碼。

add_action( 'after_wp_tiny_mce', 'custom_after_wp_tiny_mce' );
function custom_after_wp_tiny_mce() {
    printf( '<script type="text/javascript" src="%s"></script>',  plugins_url('/js/admin.js', __FILE__) );
}

對於獲取或插入資料，我更喜歡使用 tinymce api 而不是 jquery hack 。所以，

獲取資料

var content = tinyMCE.activeEditor.getContent();

插入內容

tinymce.activeEditor.execCommand('mceInsertContent', false, 'Text to insert goes here')

最佳解決辦法

在 TinyMCE 之後新增指令碼：

您可以檢視 before_wp_tiny_mce 和 after_wp_tiny_mce 鉤子。

如果您檢視檔案/wp-includes/class-wp-editor.php，您可以看到 TinyMCE 設定指令碼並不是透過通常的 enqueue 方法載入，而是透過以下方式顯示：

add_action( 'admin_print_footer_scripts', array( __CLASS__, 'editor_js'), 50 );

其中 editor_js 方法包含以下程式碼：

...cut...
            do_action('before_wp_tiny_mce', self::$mce_settings);
?>

        <script type="text/javascript">
                tinyMCEPreInit = {
                        base : "<?php echo self::$baseurl; ?>",
                        suffix : "<?php echo $suffix; ?>",
                        query : "<?php echo $version; ?>",
                        mceInit : <?php echo $mceInit; ?>,
                        qtInit : <?php echo $qtInit; ?>,
                        ref : <?php echo self::_parse_init( $ref ); ?>,
                        load_ext : function(url,lang){var sl=tinymce.ScriptLoader;sl.markDone(url+'/langs/'+lang+'.js');sl.markDone(url+'/langs/'+lang+'_dlg.js');}
                };
        </script>
<?php

                $baseurl = self::$baseurl;

                if ( $tmce_on ) {
                        if ( $compressed ) {
                                echo "<script type='text/javascript' src='{$baseurl}/wp-tinymce.php?c=1&amp;$version'></script>n";
                        } else {
                                echo "<script type='text/javascript' src='{$baseurl}/tiny_mce.js?$version'></script>n";
                                echo "<script type='text/javascript' src='{$baseurl}/wp-tinymce-schema.js?$version'></script>n";
                        }

                        if ( 'en' != self::$mce_locale && isset($lang) )
                                echo "<script type='text/javascript'>n$langn</script>n";
                        else
                                echo "<script type='text/javascript' src='{$baseurl}/langs/wp-langs-en.js?$version'></script>n";
                }
...cut...
            do_action('after_wp_tiny_mce', self::$mce_settings);

因此，如果要在所有 TinyMCE 指令碼之後新增自定義指令碼，可以透過 after_wp_tiny_mce 鉤子模擬上述方式 (non-elegant)：

add_action( 'after_wp_tiny_mce', 'custom_after_wp_tiny_mce' );
function custom_after_wp_tiny_mce() {
    printf( '<script type="text/javascript" src="%s"></script>',  plugins_url('/js/admin.js', __FILE__) );
}

這引發了一個問題，為什麼不是所有的 TinyMCE 指令碼都透過入隊載入。

鉤子 admin_print_footer_scripts 對於透過排隊新增新指令碼來說太遲了，所以可能是這些 TinyMCE 指令碼中的一些指令碼必須在頁面上載入很晚。

用 jQuery 捕獲編輯器內容：

你也可以嘗試這個程式碼片段，排入正常的方式：

jQuery(window).load( function() {

    // test 1:
    //var ed = tinyMCE.activeEditor;
    //console.log( ed.getContent() );

    // test 2:
    // console.log( jQuery('#content_ifr').contents().find('#tinymce').html() );

    // test 3:
    if( jQuery('#content').length > 0 ){
        console.log( jQuery('#content').html() );
    }

});

獲取編輯內容。

參考文獻

Enqueue Script After TinyMCE initialized

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

WordPress TinyMCE 初始化後的入隊指令碼