Bookmarklet and tinyMCE

Question

function loadBookmarklet() { var scriptT = document.createElement("script"); scriptT.src = "http://abc.com/tinymce/jscripts/tiny_mce/tiny_mce.js"; scriptT.type = "text/javascript";

document.body.appendChild(scriptT); tinyMCE.init({ mode : "textareas", theme : "simple" }); };

i am getting the error tinyMCE is not defined, can anyone please help me with this?

New Error

Here is the new code that i have which is giving me another error

function loadBookmarklet() {
      var scriptT = document.createElement("script");
      scriptT.src = "http://abc.com/tiny_mce.js";
          scriptT.type = "text/javascript";
      scriptT.onload = function(){}
      document.body.appendChild(scriptT);
      tinyMCE.init({ mode : "textareas", theme : "simple" }); 
      newTM = tinyMCE;
      var scriptW = document.createElement("script");
      scriptW.src = "http://abc.com/widget.js";
      scriptW.type = "text/javascript";
      document.body.appendChild(scriptW);

    }

in my widget.js i am trying to set the textarea in the widget.js to the editor

newTM.activeEditor.setContent(selectedText);

the error is

newTM.activeEditor is null

Answer 1

thats because you are not waiting for the tiny_mce.js to finish loading before you refer to the tinyMCE variable

You need to defer the tinyMCE.init code until the file is loaded. there are a couple of ways to do this

1. Attach an onload / oncomplete handler to the injected script element, and then move the init code inside that handler. (This method may vary from browser to browser in terms of onload and oncomplete)
2. set up a setTimeout function that checks for the existence of tinyMCE,
   1. if it does not exist, it calls itself again
   2. if it exists the timeout is cleared and the init script is called

I usually use the second method, so you code can be adjusted to

var scriptT = document.createElement("script"); 
scriptT.src = "http://abc.com/tinymce/jscripts/tiny_mce/tiny_mce.js"; scriptT.type = "text/javascript";
document.body.appendChild(scriptT);

//Your script loading code is above this line

function TM_wait() { //this function checks for existence of tinyMCE
  if(typeof tinyMCE == 'undefined') {
    window.setTimeout(TM_wait,100); 
    //calls itself if tinyMCE is not loaded
  }else{
    tinyMCE.init({ mode : "textareas", theme : "simple" }); 
    //calls the init function cos tinyMCE is loaded
  }

}

TM_wait(); // calls the checker function for the first time

---

EDIT

In response to your edit, try this

function loadBookmarklet() {
      var scriptT = document.createElement("script");
      scriptT.src = "http://abc.com/tiny_mce.js";
      scriptT.type = "text/javascript";
      scriptT.onload = function(){
        var scriptW = document.createElement("script");
        scriptW.src = "http://abc.com/widget.js";
        scriptW.type = "text/javascript";
        scriptW.onload = function(){
           newTM = tinyMCE;
           newTM.init({ mode : "textareas", theme : "simple" }); 
        }
        document.body.appendChild(scriptW);
      }
      document.body.appendChild(scriptT);
}

step by step of what's happening above:

1. TinyMCE is loaded
2. when tinyMCE is finished loading, your widget is loaded
3. when your widget is finished loading, the variable newTM is created as an alias of tinyMCE
4. tinyMCE is initialised

Because we wait for tinyMCE and the widget.js to finish loading, everything is set up properly and in order. Now your newTM should contain a reference to tinyMCE