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 初始化後的入隊腳本