我正在使用jquery在一个元框内制作一个小的实时预览区域，在这里我需要从tinymce编辑器获取内容。但我的脚本似乎是在tinymce之前加载的，当我尝试从编辑器字段获取内容时，它返回null。
Enqueue:
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 依赖性，但没有用。脚本将在tinymce配置之前打印。
jQ Code for getting editor content:
html += jQuery(\'#content_ifr\').contents().find(\'#tinymce\').html();
它返回
NULL.
Resolved:
多亏了@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。所以
Getting Data
var content = tinyMCE.activeEditor.getContent();
Inserting Content
tinymce.activeEditor.execCommand(\'mceInsertContent\', false, \'Text to insert goes here\')
最合适的回答,由SO网友:birgire 整理而成
在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&$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$lang\\n</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 挂钩：
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 对于通过enqueue添加新脚本来说太晚了，所以可能是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() );
}
});
获取编辑器内容。
