How to get tinymce content in jquery?

Html text editor text code:

<textarea name="description" class="tinymce" id="texteditor"></textarea>

You can print TinyMCE text editor code using javascript like this.

var content = tinymce.get("texteditor").getContent();
alert(descriptionFieldTxt);

output:

enter image description here

output with tags
enter image description here

Now you can print tinymce texteditor value without p tag like this

var content = tinymce.get("texteditor").getContent({format: "text"});
alert(descriptionFieldTxt);

This code print text without tags:

enter image description here


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/