Bookmarklet and tinyMCE - 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
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)
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:
TinyMCE is loaded
when tinyMCE is finished loading, your widget is loaded
when your widget is finished loading, the variable newTM is created as an alias of tinyMCE
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