How to extract HTML content from TinyMCE Editor

Question

I\'m a beginner on Javascript/TinyMCE and I try to understand how is it possible to get the HTML content from the editor, and show it with a simple alert() function.

<

Answer 1

I don't know why it doesn't work

It's not working because

console.debug(tinyMCE.activeEditor.getContent());

tinymce.activeEditor.getContent();

these statements are not being executed.

Try to follow this FIDDLE ....

tinyMCE.init({
        // General options
        mode : "specific_textareas",
        editor_selector : "mceEditor"
});

Function for getting content ....

function get_editor_content() {
  // Get the HTML contents of the currently active editor
  console.debug(tinyMCE.activeEditor.getContent());
  //method1 getting the content of the active editor
  alert(tinyMCE.activeEditor.getContent());
  //method2 getting the content by id of a particular textarea
  alert(tinyMCE.get('myarea1').getContent());
}

Get the content of editor on button click ...

<button onclick="get_editor_content()">Get content</button> 

Answer 2

TinyMCE creates an iframe under the format '#textareaid'+'_ifr' So by using jquery we can query the HTML contents of the text area you like

the iframe id will be your textarea Id with "_ifr" appended to that. So you can extract HTML contents from tinyMce

$('#textareaId_ifr').contents().find("html").html();

Answer 3

I was looking for a solution and tried some of the above then went looking more on the tinymce documentation and found this to be effective.
Using the tiny mce 4

function getHTML()
{
   tinymce.activeEditor.on('GetContent', function(e) {
     console.log(e.content);
   });
}

just call that function with an onclick and see what the results are...
My source is: http://www.tinymce.com/wiki.php/api4:class.tinymce.ContentEvent

Answer 4

Maybe it's the case? Your variable is tinyMCE, but you are calling getContent() on tinymce. JS is case sensitive ;)