Skip to content

Instantly share code, notes, and snippets.

@RadGH
Last active October 21, 2022 01:21
Show Gist options
  • Save RadGH/523bed274f307830752c to your computer and use it in GitHub Desktop.
Save RadGH/523bed274f307830752c to your computer and use it in GitHub Desktop.
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();
}
}
@JiveDig
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
Copy link

jjrr13 commented Aug 20, 2019

Me sirvio mucho, un saludo...

@qstudio
Copy link

qstudio commented Sep 14, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment