Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Get/Set content of a TinyMCE visual or text editor with JavaScript
/*
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();
}
}
@MikevHoenselaar

This comment has been minimized.

Copy link

MikevHoenselaar commented Aug 2, 2014

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

@RadGH

This comment has been minimized.

Copy link
Owner Author

RadGH commented Aug 7, 2014

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

@joshhowenstine

This comment has been minimized.

Copy link

joshhowenstine commented Dec 11, 2016

Just what I was looking for. Thanks so much.

@JiveDig

This comment has been minimized.

Copy link

JiveDig commented Jul 15, 2019

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:
Screenshot 2019-07-15 14 53 04

instead of this:
Screenshot 2019-07-15 14 53 41

@jjrr13

This comment has been minimized.

Copy link

jjrr13 commented Aug 20, 2019

Me sirvio mucho, un saludo...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.