How to capture TinyMCE editor content using JavaScript in WordPress

Other Questions Wordpress
1

I’m working with a WordPress shortcode that creates a basic textarea element with ID post_body. I want to add rich text editing features so I’m using some PHP and JavaScript to overlay the WordPress TinyMCE editor on this textarea. Getting the editor to display and accept input is straightforward with basic PHP code. However, I’m struggling to extract and handle the content properly.

My goal:
I need to grab the content from the TinyMCE editor, put it into the original textarea field, and make sure it gets saved when the form is submitted. Right now none of this is working correctly.

<textarea id="post_body" name="post_body" class="form-control" placeholder="Enter your message" required minlength="5" maxlength="8000" style="display: none;"></textarea>

<input type="submit" class="submit-btn" value="Post Message" />

<?php
wp_editor( $message, 'post_body' );
?>

$('#message-form').on('submit', function(e) {
    var editorInstance = tinymce.get('post_body');
    
    if (editorInstance) {
        var editorContent = editorInstance.getContent();
        var hiddenField = document.getElementById('post_body');
        
        if (hiddenField) {
            hiddenField.value = editorContent;
        }
    }
    
    tinymce.triggerSave();
});

What’s the right way to make this work?

2

Alice is right about the timing issue, but there’s a better way. Skip fighting TinyMCE’s quirks and automate the content capture instead.

I’ve hit this same WordPress form headache before. Manual approaches get ugly fast with multiple editors or complex validation.

Build a workflow that watches your TinyMCE changes and auto-syncs content to your textarea. Trigger it on form submit, editor blur, or set intervals - whatever works.

The automation fixes timing issues, validates content format, and keeps your textarea current before submission. No more manual event binding or TinyMCE timing nightmares.

Bonus: this scales way better. Add more editors later or change content rules? The workflow adapts without touching your JavaScript.

3

add e.preventDefault() at the start of ur submit handler, then manually submit the form after setting the textarea value. also check that tinymce loads completely before you bind the submit event - timing issues mess up wp tinymce instances pretty often.

4

Your code’s mostly right but you’re missing something important. Move tinymce.triggerSave() to the beginning of your submit handler, not after grabbing content. TinyMCE won’t sync back to the textarea unless you tell it to. Call tinymce.triggerSave() first, then grab the textarea value directly instead of using getContent(). This worked for me on a WordPress project:

$('#message-form').on('submit', function(e) {
    tinymce.triggerSave();
    // Now the textarea should have the updated content
    var content = document.getElementById('post_body').value;
});

Also check your form ID - you’re targeting #message-form but didn’t show that ID in your HTML. Make sure the form element actually has that identifier.

5

Had this exact problem last month building a custom WordPress form. The issue is wp_editor creates its own hidden textarea and ignores your original one. When you call wp_editor with ‘post_body’ as the ID, WordPress generates a new textarea that replaces yours in the DOM.

What fixed it: remove the original textarea completely and let wp_editor handle everything. In your submit handler, just call tinymce.triggerSave() and grab the content from wp_editor’s textarea - no complex logic needed.

Also, don’t hide the textarea with display:none since that messes with TinyMCE’s syncing. Hide a wrapper div instead. The editor needs the textarea accessible for proper content sync during form submission.