Installing TinyMCE Help

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);
}
 
L

-Lost

I have difficulties initializing TinyMCE.
<snip TinyMCE code and whatnot>

You are *still* working on that TinyMCE example?

Any link to your example? Any errors or is TinyMCE just not behaving as
you expect?
 
V

vunet.us

THIS IS a plug-n-play example which works! Try to remove textarea and
it won't work. My goal is to add textarea dynamically and init
tinyMCE. That's all...

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My example</title>
<!-- tinyMCE -->

<script language="javascript" type="text/javascript"

src="http://www.eclayer.com//tinymce/jscripts/tiny_mce/tiny_mce.js"></
script>

<script language="javascript" type="text/javascript">
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);
}


</script>
<!-- /tinyMCE -->

</head>
<body>

<textarea id='Descriptions' style='width:450px; height:250px'></
textarea>

</body>
</html>
 
L

-Lost

THIS IS a plug-n-play example which works! Try to remove textarea and
it won't work. My goal is to add textarea dynamically and init
tinyMCE. That's all...
<snip semi-working example>

1. Either rewrite the init() method, because its DOM-readiness is shit.

I tried tests both by dynamically adding textareas and by attempting to
hide/show them.

No luck.

The init() method does some really weird stuff in regards to the
original textarea. For example, it rewrites the entire damn thing into
this convoluted TABLE, SPAN crap.

2. Find the TABLE of TinyMCE and hide it. Here is the kicker though...
YOU MUST hide it via JavaScript. Do it via CSS and the TABLE gets
removed before TinyMCE initializes it. Another sign of TinyMCE and/or
its init() method being feces.

I have seen stool samples with better code and practices than what
TinyMCE produces.

Poop Count = 4
 
P

Peter Michaux

The cost per question is €25.

Holy crap! Do they pay €25 for each bug report?

I just loaded their demo. Wow that took a long time.

What about the FCKEditor? Free support.

Peter
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top