How to get tinymce content in jquery?

Question

i am trying to get tinymce data but getting tinyMCE undefined error. Here is my code:

function savePost( ){ 

    console.log(  jQuery(\'#wp_tinymce_editor\')         


        

Answer 1

TinyMCE object/library is the one the responsible for your Editor, so you should use that object to get the content.

You can use the activeEditor for that, or if (for some reason) you have the original element that created the editor in a jQuery object, you can use that jQuery object to get the id of the original element and use that in order to get the content of the TinyMCE (using the TinyMCE editor).

Only with jQuery - You should never use this

If for some reason you really have to use only jQuery for that (and I really don't understand why), you can use the id of the original element, concatenated with _ifr and get the content. Using this option will probably give you don't want, because tinymce add tags to the html that exists in the dom but stripped when calling the getContent function.

Here is an example for the 3 options:

$('#btn1').click(function() {
    console.log(tinyMCE.activeEditor.getContent());
});
$('#btn2').click(function() {
    console.log(tinyMCE.editors[$('#ta').attr('id')].getContent());
});
$('#btn3').click(function() {
    alert('You should really NOT use this option');
    console.log($('#ta_ifr')[0].contentDocument.body.innerHTML);
});

Here is a working example: https://jsfiddle.net/8tdf3q22/