Menu
Hiya,
I’m trying to implement an integrated HTML editor into my application.. but I’m hitting my head against a brick wall trying to get the focus working the way I want it to within it…
I’ve produced a simplified version of the editor bellow to demonstrate the problem
– Immediately on loading, I want the focus to be placed within the body of the iframe.. I don’t really care where even.. just so that the user can start inputting text without having to click within the iframe.. If you use the dropdown box to insert some text, it’ll be placed at the top of the screen rather than bellow the toolbar.
The strange part here is that sometimes it works.. sometimes it doesn’t (if i keep hitting f5, I can see it sometimes working.. and sometimes not).. I can’t figure out why it is intermittant.. or how to guarantee that the focus will be where I expect it to be..
I’ve used so many techniques to try and get the body element within the iframe and then to focus it.. but none seem to work reliably..
The problem also effects my full editor when I switch between source and preview modes.. but I’ve ommited that from the bellow example as I belive the solution to that will be the same as the one I’ve just detailed..
The parameters for this exercise are:
– the editing area has to be an iFrame.
– It must work in IE6.. other browsers aren’t supported currently.
If anyone needs any additional information, please just ask.
The bellow code is also available [URL=http://hosted.yetanother.net/wtf.html]here
[CODE]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>GRRRRRrrrrrrrrrrrr</title>
<style>
body { border: 0px; margin: 0px; overflow: hidden; }
.toolbar { background-color:#c3daf9; font:menu; border:1px solid #c3daf9 }
</style>
<script type=”text/javascript”>
function init() {
var htmled = document.getElementById(“html_editor”);
htmled.contentWindow.document.write( “This is some text within the iframe” );
html_editor.document.designMode = ‘on’
htmled.contentWindow.focus();
}
</script>
</head>
<body onload=”init()”>
<table width=”100%” height=”100%” cellspacing=”0″ cellpadding=”0″>
<tr>
<td height=”1%”>
<table cellspacing=”1″ class=”toolbar” width=”100%”>
<tr>
<td>
<select size=”1″ id=”dataDropBox” onchange=”var r=html_editor.document.selection.createRange();r.text=this.value;this.selectedIndex=0;” >
<option value=””>Choose text to insert</option>
<option value=”SomeText”>Insert SomeText</option>
<option value=”MoreText”>Insert MoreText</option>
</select>
</td>
<td width=100%> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=”100%” valign=”top”>
<iframe id=”html_editor” style=”width:100%;height:100%” border=”0″ frameborder=”0″></iframe>
</td>
</tr>
</table>
</body>
</html>
This problem has been driving me nuts on and off for a number of weeks now.. I’m now at the point where everything else is working appart from this… so if anyone could shed any light on it for me, I’d be much obliged!
Cheers!