asked on

contentEditable in firefox?

Hi,

I have a div section with contentEditable = true. Everything works great in IE, however in firefox i cannot edit any text in the div. What do I need to change for firefox to be happy? Below is the full page:

<html>
<head>
<script>
function FindLink()
{
var dc = document.getElementById("chip1").getElementsByTagName("A");
for (i=0;i<dc.length;i++) {
dc[i].onclick = new Function("window.open(this,this.id,''); return false;");
}
}
</script>
</head>
<body>

<div onmouseover="FindLink()" id = "chip1" contentEditable = false style = "left: 134px; overflow:scroll; width:188px; border-top-style:inset; border-right-style:inset; border-left-style:inset; position:absolute; top:75px; height:125px; border-bottom-style:inset">
<b>hello</b>
<Font color=red>Hi Again!</font>

<a href="http://www.something.com">www.something.com</a>
</div>

</body>
</html>

ASKER CERTIFIED SOLUTION

KennyTM

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

minnirok

ASKER

Ok if I have to use iframes that's fine, but will that work in IE as well? Do you have an example you can post of this working in both browsers?

Thanks

KennyTM

Well, in fact "designMode" is supported in IE (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/designmode.asp), so if you just want the section to be editable, this is enough:

<body onload="document.getElementById('the_iframe').contentWindow.document.designMode = 'on';">

...
<iframe src="about:blank" id="the_iframe" />

But if you want to script it also, browser incompatibility involves.

minnirok

ASKER

Hi Kenny,

So what's the difference exactly between designMode and contentEditable ?

All I want to be able to do is let the user type some text into the div, then if they type a URL like www.hello.com, have it be hilighted and they can click on it.

Can 'designMode' do that with the iFrames for both IE and FF?

Sorry for my confusion,

Thanks

KennyTM

designMode can only be applied to a "document" (e.g. a frame / iframe), and contentEditable can almost be applied in any tags. But contentEditable is IE-only.

And if you follow http://www.mozilla.org/editor/ie2midas.html , it should be able to support both IE & Fx.

minnirok

ASKER

Hi Kenny,

I'm a little worried, I followed the link and then tried their demo:

http://www.mozilla.org/editor/midasdemo/

Now, in IE a 'link' will auto hilight (like www.whatever.com), but the same page run in firefox does absolutely nothing after you've typed a URL in the text field.... am I missing something? Is it even supposed to auto-hilight for firefox?

Thanks

KennyTM

Yes, Firefox doesn't support auto-highlight. You'll need to program that yourself...

minnirok

ASKER

Oh dear. Ok, I will have to open a new question for that then.

Thanks!