set textarea value to iframe?

[olddocks]

i am planning on kind of editor by replacing the textarea with iframe so that i could edit the content with rich html.

I am facing weird problem and i cannot set the value of iframe innerHTML with the value of textarea while loading. The idea is hide the textarea after moving the value to iframe rich text editor.

what could be the problem. here is the code

var myeditor; 

window.onload = function() 
{ 
myeditor = document.getElementById('rte').contentWindow.document; 
myeditor.designMode = "on";

}

function Start(obj,width,height) {
	
	
	document.write("<img src=\"bold.gif\" name=\"btnBold\" onClick=\"doClick('bold')\">"); 
    document.write("<img src=\"italic.gif\" name=\"btnItalic\" onClick=\"doClick('italic')\">");
	document.write("<img src=\"underline.gif\" name=\"btnUnderline\" onClick=\"doClick('underline')\">");
	document.write("<img src=\"link.gif\" name=\"btnLink\" onClick=\"doLink()\">");
	document.write("<img src=\"unlink.gif\" name=\"btnUnlink\" onClick=\"doClick('unlink')\">");
	document.write("<img src=\"picture.gif\" name=\"btnPicture\" onClick=\"doImage()\">");
	document.write("<br>");

	document.write("<iframe id=\"rte\" width=\"" + width + "\" height=\"" + height + "\" style=\"border:1px solid grey\"></iframe>");

 LoadData(obj);
}

function LoadData(obj)
{

myeditor.body.innerHTML= document.getElementById(obj).value;
document.getElementById(obj).style.visibility="hidden";
}
[/html]

[html]
<form action="" method="post" >
  <p>
  
 <textarea name="mybox" id="mybox" >This is a <b>bold</b> sample textarea</textarea>
 <script>Start('mybox',600,400);
  </script>
  </p>
  <p>
    <input type="submit" name="Submit" value="Submit">
  </p>
</form>

[rohypnol]

Hello,

Are you sure line #5 is OK? It says

myeditor = document.getElementById('rte').contentWindow.docum  ent;

There are a couple of spaces between docum and ent

And the other problem is that <script> tags are evaluated as they are read from the HTML file. Your first script sets a window.onload event but that doesn't trigger until after everything has been rendered. In your second paste, on line 5, you're calling the Start() function. This is executed before the window.onload event is triggered, because the JS parser works like this:

1. define variable myeditor
2. set the window.onload event
3. define function Start
4. define function LoadData
5. call the Start function
6. execute window.onload

What you need to so is to put the call to Start() in the window.onload event. Normally you'd have a fixed window.onload function that calls the functions in an array and you'd have another function that adds functions to that array, something like this (not sure if this exact piece of code will work, but you get the idea):

var load_events = [];
window.onload = function () { for (var i = 0; i < load_events.length; ++i) load_events[ i ](); }
function addLoadEvent(func) { load_events[load_events.length] = func; }


// ... later ...
function init_myeditor()
{
myeditor = document.getElementById('rte').contentWindow.document;
myeditor.designMode = "on"
}
addLoadEvent(init_myeditor); // no () because we pass the function, not it's result


// ... later ...
addLoadEvent(function () { Start('mybox', 600, 300); });

This would cause the init_myeditor() function to trigger before the anonymous function that calls Start() and, best of all, it will allow you to add other onload events. All you need to do is make sure that you add them in the right order.

Regards,
Tom

[mushrefa]

i have a problem creating rich text editor .how to call two different function in iframe?