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'm not sure why I haven't been able to find this, but does anyone know how to get the input of the TinyMCE editor? I am using it in the front end and want to be able to save whatever the user has typed into the TinyMCE to a database but cannot find the best way to capture that value.

The two solutions that I've implemented with some success are:

  1. tinyMCE.activeEditor.getContent(); - This one seems to only get the value of the visual editor so if I'm in the HTML editor and make changes and then save, they aren't picked up.

  2. $('#html_text_area_id').val(); - This one is the opposite, it only seems to get the value of the HTML editor.

I know there is a better way - I just can't seem to find it...

p.s Yes, I'm going to implement security measures to make sure people can't blow up the database.

share|improve this question
2  
When you initiate tinyMCE, usually you bind it yo a textarea so just use that textarea's id with jQuery's val() –  Bainternet Feb 17 '12 at 7:32
    
Yeah, I've tried that but it only gets the value of the html editor. If I am in the visual editor, make changes, then try to save, whatever changes I've made in the visual editor are not saved. –  Sam Feb 17 '12 at 20:49

2 Answers 2

up vote 9 down vote accepted

Ok apparently WordPress keeps track of what kind of editor (visual or html) is active as a class which is added to the content wrapper so here is a solution that will get you the latest content in the editor

function get_tinymce_content(){
    if (jQuery("#wp-content-wrap").hasClass("tmce-active")){
        return tinyMCE.activeEditor.getContent();
    }else{
        return jQuery('#html_text_area_id').val();
    }
}
share|improve this answer
    
Hmm, interesting idea. I'll test that out and report back. Thanks! –  Sam Feb 17 '12 at 23:48
1  
Worked perfectly. Thanks for your help! If I had enough reputation I'd vote it up. –  Sam Feb 18 '12 at 17:27
    
Glad it worked out for you, and you can accept the answer as a right answer that will do just fine :) –  Bainternet Feb 18 '12 at 18:09
1  
It took a long time to find an answer for this. I also needed a way to set the content. In case anyone else also needs a way to set content, here is a Gist of both (get/set) functions: gist.github.com/RadGH/523bed274f307830752c. This also works with custom wp_editor IDs, not just the default. –  RadGH Jul 17 at 18:46

That's the code I added to my javascript, right before the form is submitted.

// Find and loop through all TinyMCE editors.
jQuery('#the-form').find( '.wp-editor-area' ).each(function() {
    var id = jQuery( this ).attr( 'id' ),
        sel = '#wp-' + id + '-wrap',
        container = jQuery( sel ),
        editor = tinyMCE.get( id );

    // If the editor is in "visual" mode then we need to do something.
    if ( editor && container.hasClass( 'tmce-active' ) ) {
        // Saves the contents from a editor out to the textarea:
        editor.save();
    }
});
share|improve this answer

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.