Why is this getting 'cannot call method getContent of undefined', how is this possible? It sets up my textarea with tinyMCE but can't do getContent.

tinyMCE.init({
            plugins: 'paste',
            theme : "advanced",
            mode : "specific_textareas",
            editor_selector : element,
            width : width,
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,bullist,numlist,undo,redo,",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            content_css : "hhhng.css",
            paste_text_sticky : true,
            //select pasteAsPlainText on startup
            setup : function(ed) {
                    ed.onInit.add(function(ed) {
                    ed.pasteAsPlainText = true;
                });
            }
});
var x = tinyMCE.get(element).getContent();

Update

Works when I call from a button click but why wouldn't it work immediately after tinymce is initialise? And yes it's in a document ready block. It's not making sense to me :S

$("#button").click( function(e) {

    e.preventDefault();
    console.log(tinyMCE.activeEditor.getContent());

});

Why is this getting 'cannot call method getContent of undefined', how is this possible? It sets up my textarea with tinyMCE but can't do getContent.

tinyMCE.init({
            plugins: 'paste',
            theme : "advanced",
            mode : "specific_textareas",
            editor_selector : element,
            width : width,
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,bullist,numlist,undo,redo,",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            content_css : "hhhng.css",
            paste_text_sticky : true,
            //select pasteAsPlainText on startup
            setup : function(ed) {
                    ed.onInit.add(function(ed) {
                    ed.pasteAsPlainText = true;
                });
            }
});
var x = tinyMCE.get(element).getContent();

Update

Works when I call from a button click but why wouldn't it work immediately after tinymce is initialise? And yes it's in a document ready block. It's not making sense to me :S

$("#button").click( function(e) {

    e.preventDefault();
    console.log(tinyMCE.activeEditor.getContent());

});

• javascript
• tinymce

• it works on a button click because the editor is initialized to that point of time – Thariama Commented Jul 6, 2012 at 12:13

2 Answers 2

Even though it's in a document ready block it might be that TinyMCE doesn't create itself immediately when init is called. If you're wanting to run code once it's initialised then you should see if it provides a method of passing a callback function. It will then call this function once it's got itself ready.

In fact it looks like you're already using such a function with this bit of code:

//select pasteAsPlainText on startup
setup : function(ed) {
        ed.onInit.add(function(ed) {
        ed.pasteAsPlainText = true;
    });
}

Just add your post init code to that function body.

Additional to alnorths answer i want to show you on how to get the content as early as possible. The tinymce editor instance is being created which takes some time, as alnorth stated it is not there when you request it.

If you use the tinymce configuration (init) paramter setup and set an onInit handler there you may request the content and the editor is there to respond. Here it is:

setup : function(ed) {

    ed.onInit.add(function(ed, evt) {
        var x = tinyMCE.get(element).getContent();
        console.log(x);
    });
},

...

The tinymce onInit event gets fired as soon as the editor is ready (to be used).