Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am making a small live preview area inside a meta box using jquery where i need to get content from tinymce editor. But it seem my script loads before tinymce, this returns null when i try to get content from editor field.

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' );
    }

}

Tried adding editor on dependency but its no use. The script prints just before the tinymce configuration.

enter image description here

jQ Code for getting editor content:

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

Which returns NULL.

Resolved:

Thanks to @birgire, I was able to solve the problem. Here is the final code.

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__) );
}

For Getting or Inserting data I prefer to use tinymce api instead of jquery hack. So,

Getting Data

var content = tinyMCE.activeEditor.getContent();

Inserting Content

tinymce.activeEditor.execCommand('mceInsertContent', false, 'Text to insert goes here')
share|improve this question
    
did you try to use: tinyMCE.activeEditor.getContent(); ? –  ungestaltbar Dec 15 '12 at 10:03
    
@ungestaltbar: activeEditor is NULL too. My guess is i have to print the script after the tinyMCE initialization. –  Sisir Dec 16 '12 at 7:55

1 Answer 1

up vote 4 down vote accepted
+100

Adding scripts after TinyMCE:

You might check out the before_wp_tiny_mce and after_wp_tiny_mcehooks.

If you take a look at the file /wp-includes/class-wp-editor.php you can see that the TinyMCE settings scripts are not all loaded through the usual enqueue methods, but some are displayed via:

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

where the editor_js method contains this code:

...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$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);

So if you want to add a custom script after all the TinyMCE scripts, you could emulate it's own (non-elegant) way above through the after_wp_tiny_mce hook:

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__) );
}

This raises the question why not all the TinyMCE scripts are loaded via enqueue.

The hook admin_print_footer_scripts is too late for adding new scripts via enqueue, so it could be that some of these TinyMCE scripts must be loaded very late on the page.

Capturing the editor content with jQuery:

You could also try this snippet, enqueued the normal way:

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() );
    }

});

to get the editor content.

share|improve this answer
    
@Sisir: it's great to hear it helped you with your problem PS: I'm not sure why the answer is now owned by community wiki after trying to improve it in more than 10 edits: This post is community owned as of 4 hours ago. Votes do not generate reputation, and it can be edited by users with 100 rep. I guess I didn't read the FAQ careful enough on this matter ;-) –  birgire Aug 30 '13 at 8:16
    
I also Never knew.. :) –  Sisir Sep 1 '13 at 18:09
    
Oh my goodness... +1! I've been looking for this for months! You, my friend, are a god-send. I do tons of developing in tinymce.. and was looking for a way to pass js vars ONLY to pages which loaded the tinymce editor. THANK YOU! –  josh Apr 2 at 5:59
    
@josh Happy to hear that, good luck with your project –  birgire Apr 2 at 9:29

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.