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 初始化后的入队脚本