V
vunet.us
Hi all,
I have difficulties initializing TinyMCE. Initialization involved 1
included file tiny_mce.js and one which I include "on demand" (see
tinyMCEOnDemand()). The content of that function is all the way below.
If I do not "demand" that file but, rather, write locally, everything
works smoothly with included file tiny_mce.js. But my HTML object
required for initialization appears on the page when user decides to
make it appear, therefore TinyMCE cannot be initialized until a
necessary html object is visible (i.e. textarea). I wrote function
start() to simulate this process of my needs. As a result, I suffer
running the code below.
Can anyone suggest something?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My example</title>
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="../jscripts/
tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
function start(){
var body = document.getElementsByTagName("body")[0];
var d = document.createElement('div');
d.style.display = "none";
d.innerHTML = "<textarea id='Descriptions' style='width:450px; height:
250px'></textarea>";
body.appendChild(d);
d.style.display = "block";
tinyMCEOnDemand();
}
function tinyMCEOnDemand(){
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.id = 'tinyMCEScriptInitializer';
script.type = 'text/javascript';
script.src = "tinyInit.js";
head.appendChild(script);
}
</script>
<!-- /tinyMCE -->
</head>
<body onload="setTimeout('start()',3000);">
</body>
</html>
============================
tinyInit.js file has:
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "Descriptions",
save_callback : "customSave",
content_css : "example_advanced.css",
extended_valid_elements : "a[href|target|name]",
plugins : "table",
theme_advanced_buttons3_add_before :
"tablecontrols,separator",
//invalid_elements : "a",
theme_advanced_styles : "Header 1=header1;Header
2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific
setting CSS classes
//execcommand_callback : "myCustomExecCommandHandler",
debug : false
});
// Custom event handler
function myCustomExecCommandHandler(editor_id, elm, command,
user_interface, value) {
var linkElm, imageElm, inst;
switch (command) {
case "mceLink":
inst = tinyMCE.getInstanceById(editor_id);
linkElm =
tinyMCE.getParentElement(inst.selection.getFocusElement(), "a");
if (linkElm)
alert("Link dialog has been overriden. Found link href: " +
tinyMCE.getAttrib(linkElm, "href"));
else
alert("Link dialog has been overriden.");
return true;
case "mceImage":
inst = tinyMCE.getInstanceById(editor_id);
imageElm =
tinyMCE.getParentElement(inst.selection.getFocusElement(), "img");
if (imageElm)
alert("Image dialog has been overriden. Found image src: " +
tinyMCE.getAttrib(imageElm, "src"));
else
alert("Image dialog has been overriden.");
return true;
}
return false; // Pass to next handler in chain
}
// Custom save callback, gets called when the contents is to be
submitted
function customSave(id, content) {
alert(id + "=" + content);
}
I have difficulties initializing TinyMCE. Initialization involved 1
included file tiny_mce.js and one which I include "on demand" (see
tinyMCEOnDemand()). The content of that function is all the way below.
If I do not "demand" that file but, rather, write locally, everything
works smoothly with included file tiny_mce.js. But my HTML object
required for initialization appears on the page when user decides to
make it appear, therefore TinyMCE cannot be initialized until a
necessary html object is visible (i.e. textarea). I wrote function
start() to simulate this process of my needs. As a result, I suffer
running the code below.
Can anyone suggest something?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My example</title>
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="../jscripts/
tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
function start(){
var body = document.getElementsByTagName("body")[0];
var d = document.createElement('div');
d.style.display = "none";
d.innerHTML = "<textarea id='Descriptions' style='width:450px; height:
250px'></textarea>";
body.appendChild(d);
d.style.display = "block";
tinyMCEOnDemand();
}
function tinyMCEOnDemand(){
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.id = 'tinyMCEScriptInitializer';
script.type = 'text/javascript';
script.src = "tinyInit.js";
head.appendChild(script);
}
</script>
<!-- /tinyMCE -->
</head>
<body onload="setTimeout('start()',3000);">
</body>
</html>
============================
tinyInit.js file has:
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "Descriptions",
save_callback : "customSave",
content_css : "example_advanced.css",
extended_valid_elements : "a[href|target|name]",
plugins : "table",
theme_advanced_buttons3_add_before :
"tablecontrols,separator",
//invalid_elements : "a",
theme_advanced_styles : "Header 1=header1;Header
2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific
setting CSS classes
//execcommand_callback : "myCustomExecCommandHandler",
debug : false
});
// Custom event handler
function myCustomExecCommandHandler(editor_id, elm, command,
user_interface, value) {
var linkElm, imageElm, inst;
switch (command) {
case "mceLink":
inst = tinyMCE.getInstanceById(editor_id);
linkElm =
tinyMCE.getParentElement(inst.selection.getFocusElement(), "a");
if (linkElm)
alert("Link dialog has been overriden. Found link href: " +
tinyMCE.getAttrib(linkElm, "href"));
else
alert("Link dialog has been overriden.");
return true;
case "mceImage":
inst = tinyMCE.getInstanceById(editor_id);
imageElm =
tinyMCE.getParentElement(inst.selection.getFocusElement(), "img");
if (imageElm)
alert("Image dialog has been overriden. Found image src: " +
tinyMCE.getAttrib(imageElm, "src"));
else
alert("Image dialog has been overriden.");
return true;
}
return false; // Pass to next handler in chain
}
// Custom save callback, gets called when the contents is to be
submitted
function customSave(id, content) {
alert(id + "=" + content);
}