Get/Set content of a TinyMCE visual or text editor with JavaScript

wordpress-tinymce.js

/* 

Based on: http://wordpress.stackexchange.com/questions/42652/#answer-42729

These functions provide a simple way to interact with TinyMCE (wp_editor) visual editor.
This is the same thing that WordPress does, but a tad more intuitive.
Additionally, this works for any editor - not just the "content" editor.

Usage:

0) If you are not using the default visual editor, make your own in PHP with a defined editor ID:
  wp_editor( $content, 'tab-editor' );
  
1) Get contents of your editor in JavaScript:
  tmce_getContent( 'tab-editor' )
  
2) Set content of the editor:
  tmce_setContent( content, 'tab-editor' )

Note: If you just want to use the default editor, you can leave the ID blank:
  tmce_getContent()
  tmce_setContent( content )
  
Note: If using a custom textarea ID, different than the editor id, add an extra argument:
  tmce_getContent( 'visual-id', 'textarea-id' )
  tmce_getContent( content, 'visual-id', 'textarea-id')
  
Note: An additional function to provide "focus" to the displayed editor:
  tmce_focus( 'tab-editor' )

=========================================================
*/
function tmce_getContent(editor_id, textarea_id) {
  if ( typeof editor_id == 'undefined' ) editor_id = wpActiveEditor;
  if ( typeof textarea_id == 'undefined' ) textarea_id = editor_id;
  
  if ( jQuery('#wp-'+editor_id+'-wrap').hasClass('tmce-active') && tinyMCE.get(editor_id) ) {
    return tinyMCE.get(editor_id).getContent();
  }else{
    return jQuery('#'+textarea_id).val();
  }
}

function tmce_setContent(content, editor_id, textarea_id) {
  if ( typeof editor_id == 'undefined' ) editor_id = wpActiveEditor;
  if ( typeof textarea_id == 'undefined' ) textarea_id = editor_id;
  
  if ( jQuery('#wp-'+editor_id+'-wrap').hasClass('tmce-active') && tinyMCE.get(editor_id) ) {
    return tinyMCE.get(editor_id).setContent(content);
  }else{
    return jQuery('#'+textarea_id).val(content);
  }
}

function tmce_focus(editor_id, textarea_id) {
  if ( typeof editor_id == 'undefined' ) editor_id = wpActiveEditor;
  if ( typeof textarea_id == 'undefined' ) textarea_id = editor_id;
  
  if ( jQuery('#wp-'+editor_id+'-wrap').hasClass('tmce-active') && tinyMCE.get(editor_id) ) {
    return tinyMCE.get(editor_id).focus();
  }else{
    return jQuery('#'+textarea_id).focus();
  }
}

wpActiveEditor(); wasn't working for me if I didn't add 'content' as editor_id.
Apparently WP doesn't have that function somehow.

Oh you're right, wpActiveEditor is just a variable - not a function. I updated the code above. Thanks!

Just what I was looking for. Thanks so much.

This works really well, thank you. I'm hitting an issue where setting content then focusing on it leads to the content being highlighted instead of the cursor being at the end of the content. Any ideas how to fix?

tmce_setContent( myContent, 'comment' );
tmce_focus( 'comment' );

leads to:

instead of this:

Me sirvio mucho, un saludo...

WHen you setContent, you might want to pull the current content from the textarea and append the new content, for example:

return jQuery('#'+textarea_id).val( jQuery('#'+textarea_id).val() + content );