TinyMCE Ajax. How do I find the editor during callback? (TinyMCE.get doesn't work)

Question

I'm doing something that I think is fairly standard :

In an Ajax application, I have dynamically create an editor by

a) dynamically adding a textarea to the DOM. The id of the textarea is stored in a variable called editField

b) I wrap TinyMCE around it like this :

tinyMCE.execCommand("mceAddControl", false, jq(editField).attr('id'));

c) I fire off an ajax call to the server to get the data to be edited, and in the callback I want to put it into the editor.

tinyMCE.get( jq(editField).attr('id') ).setContent(data);

However, when I get to the callback from the ajax call

tinyMCE.get( jq(editField).attr('id') ) 

is returning undefined.

The editor seems to be working. I can use it, I can even access it through tinyMCE.activeEditor (which happens when I try to save). But I can't get it via get at this point.

SO either :

a) tinyMCE isn't fully instantiated when the callback returns

b) something else is going on.

Any ideas how I can test this? And what do people do to solve this problem?

Answer 1

Why don't you use editField instead of using the id-attribute of the jquery node(?) (should be more performant too):

tinyMCE.execCommand("mceAddControl", false, editField);
tinyMCE.get( editField).setContent(data);
tinyMCE.get( editField);

Does this work?

Answer 2

OK. I solved this. But not very elegantly.

My problem really was that the TinyMCE editor wasn't fully instantiated in time for the return from the ajax call.

What I ended up doing was this :

1) in the ajax callback :

a) start to instantiate the editor with the addControl command

b) fill a global variable (MY_GLOBAL) with the value that's returned from the server

2) when I call tinyMCE.init() I pass it a callback for the OnInit event. This takes 2 steps :

a) define a "setup" function which adds an OnInit callback handler to tinyMCE. The callback checks the global variable (MY_GLOBAL in this simplification), and inserts its value into the instance of tinyMCE now in "this".

  var setup = function(editor) {
    editor.onInit.add( function(editor, evt) {
      if (MY_GLOBAL) {
        this.setContent(MY_GLOBAL);
      }
    });
  };

b) pass this setup into the tinyMCE.init

var config = {
  blah : blah,
  setup : setup
};
tinyMCE.init(config);

Now the ajax call still returns its value before the tinyMCE is instantiated, so it fills MY_GLOBAL. Then, when the editor finally appears, it fires off the OnInit callback, which finds the value stashed in MY_GLOBAL and puts it into the editor.