?
Solved

contentEditable in firefox?

Posted on 2006-04-18
8
Medium Priority
?
1,777 Views
Last Modified: 2008-02-01
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>
0
Comment
Question by:minnirok
  • 4
  • 4
8 Comments
 
LVL 8

Accepted Solution

by:
KennyTM earned 2000 total points
ID: 16484659
Hi.

Firefox does not support contentEditable, but it supports designMode which might suit your need. Only that you'll need to use <iframe> instead of <div>.

You can check http://www.mozilla.org/editor/ie2midas.html for detail.
0
 
LVL 7

Author Comment

by:minnirok
ID: 16486437
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
0
 
LVL 8

Expert Comment

by:KennyTM
ID: 16486573
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';">
                       <!-- to activate edit mode -->
...
<iframe src="about:blank" id="the_iframe" />

But if you want to script it also, browser incompatibility involves.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 7

Author Comment

by:minnirok
ID: 16487139
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
0
 
LVL 8

Expert Comment

by:KennyTM
ID: 16487359
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.
0
 
LVL 7

Author Comment

by:minnirok
ID: 16487548
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
0
 
LVL 8

Expert Comment

by:KennyTM
ID: 16487666
Yes, Firefox doesn't support auto-highlight. You'll need to program that yourself...
0
 
LVL 7

Author Comment

by:minnirok
ID: 16487819
Oh dear. Ok, I will have to open a new question for that then.

Thanks!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question