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.

  • 2
    When you initiate tinyMCE, usually you bind it yo a textarea so just use that textarea's id with jQuery's val()
    – Bainternet
    Commented Feb 17, 2012 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
    Commented Feb 17, 2012 at 20:49

6 Answers 6


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();
        return jQuery('#html_text_area_id').val();
  • Hmm, interesting idea. I'll test that out and report back. Thanks!
    – Sam
    Commented Feb 17, 2012 at 23:48
  • 1
    Worked perfectly. Thanks for your help! If I had enough reputation I'd vote it up.
    – Sam
    Commented Feb 18, 2012 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
    Commented Feb 18, 2012 at 18:09
  • 2
    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. Commented Jul 17, 2014 at 18:46
  • Much help for me tooo ;) Commented Oct 15, 2014 at 11:37

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:

This worked for me:

if (jQuery("#wp-description-wrap").hasClass("tmce-active")){
    description1 = tinyMCE.activeEditor.getContent( { format : 'html' } );
    description1 = jQuery('[name="description"]').val();

Where description is the ID of the tinymce editor and de code after the else of the accepted answer, did not work for me.

  • Please explain, how is it different from the accepted answer? What new info. are you providing?
    – Fayaz
    Commented Mar 23, 2017 at 7:28

I required a lot more code to get it working, and also was getting a javascript error: Deprecated TinyMCE API call: <target>.onKeyUp.add(..) This was caused by a wordpress upgrade from 3.x to 4. So I had to clear my browser cache first.

Firstly I added a callback to teh wp filter tiny_mce_before_init in my functions.php file, this allowed to me to add a js callback function to be fired when the editors are initialised:

add_filter( 'tiny_mce_before_init', array( $obj, 'filter_cb_mce_before_init' ) );

 * Filter cb to add event listeners to tinymce editor.
 * @param  array $init An array of setup js functions as strings.
 * @return array       Returns new array of js function strings.
function filter_cb_mce_before_init( array $init ) {
        $init['setup'] = "function(ed){
                if(get_tinymce_content)  //not required, I use it as flag to check if on correct page
                    ed.on('change', function(){ get_tinymce_content() });
        return $init;

Next the javascript function to do what ever is wanted with the content when it changes. Add this javascript using wp_enqueue_scripts to the page you want.

   * Get the content of the tinyMCE editor.
   * @link http://wordpress.stackexchange.com/questions/42652/how-to-get-the-input-of-a-tinymce-editor-when-using-on-the-front-end
   * @return {string} Returns the content
  function get_tinymce_content(){

    //change to name of editor set in wp_editor()
    var editorID = 'my_editor_id';

    if (jQuery('#wp-'+editorID+'-wrap').hasClass("tmce-active"))
        var content = tinyMCE.get(editorID).getContent({format : 'raw'});
        var content = jQuery('#'+editorID).val();


The code worked when I used the following to print the editor to any page:

<?php wp_editor( @$event->description, 'my_editor_id', array(
    'media_buttons' => false,
    'textarea_name' => 'data[description]',
    'quicktags'     => array("buttons"=>"link,img,close"),
) ); ?>

You can get the contents depending on the current mode of the editor.

function get_tinymce_content()
    if (jQuery(".switch-tmce").css('background-color')=='rgb(245, 245, 245)')
        return tinyMCE.activeEditor.getContent();
        return jQuery('#html_text_area_id').val();

The Visual tab has a class switch-tmce which you can use for identifying it as a tab. You would know that it has been focused if it is having the lighter background color. So, you can also use that to determine which of the two tabs is active.

This is an adaptive solution based on Bainternet's answer. There are probably other better ways to do it but this one worked well for me.


You can also use addeditor event :

  /// Fires when an editor is added to the EditorManager collection.
  tinymce.on('addeditor', function( event ) {
    var editor = event.editor;
    var $textarea = $('#' + editor.id);
  }, true );

TinyMCE 'addeditor' event documentation

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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