No, unfortunately there's currently no other way to get Firefox/Mozilla into a working design mode.

The reason for using an IFRAME is so that the selection can be stored while the user selects elsewhere outside of the IFRAME.

For example, if your editing involves selecting a drop-down or inputting a font name in a text box - in IE (and I'm guessing Safari) there is no support for having multiple (visible) active and de-active selections at the same time.

And so, the text (in your editing area) looses selection as and when the selected text box or drop-select gains focus or selection itself. (in IE you can remember the selection objects but this doesn't look so great and is unnerving for your user as it appears that the selection disappears even tho you can still use it as if it were there).

In FireFox, the selected text remains selected and the recently clicked control still works as expected, because the editing selection is in a separate frame that has it's own selection handling.

True, if you want to make certain area's quickly and freely editable on your site... not quite sure why you want to, but then this isn't very useful. If however you are using this as an extended textarea, for non-HTML users on a forum for example; or making a WYSIWYG editor - then the IFRAME method works very well, and also gives more allowances for when coding cross-browser as it keeps your editor separate from your GUI.

Hope that helps someone - took me a little while to work out the idiosyncrasies in the separate browsers where designMode was concerned, and above is one of them.. :)


Q u e s t i o n
---

I have no way of testing designMode in Safari so i was just wondering if anyone knows if it behaves in much the same way as Internet Explorer does (in the way it edits text and the javascript code used to control it).

I have successfully managed to tame IE's contentEditable behaviour (by use of events) so that it behaves more like a text editor (and that of FireFox's designMode - one example is that rather than creating paragraphs and divs on the pressing of enter it just drops to a newline) but just wandering if there are any large differences i should be watching out / ready for as i am having to extend my WYSIWYG editor to handle Apple Machines with OS X for a client.

Cheers.

I'm afraid that safari definitely doesn't act in the same way as IE in designMode. I wish it did! In fact, as far as I can work out, safari really doesn't implement a lot of the functions that either IE or Mozilla do to support designMode features. For example: getSelection in safari returns selected text, rather than an HTML object, which is what is often needed when developing, for example, a WYSIWYG editor ;)

If anybody believes this to be different, and has the documentation to back it up, I would really really appreciate someone letting me know ;)

Until then, if you want your WYSIWYG editor to work on OS X, just install FireFox on your Mac. It works fine.

Consequently enough, these guys managed it: http://editor.hardcoreinternet.co.uk/hardcore/webeditor/

The JS is opensource, I believe...hmmm...

Hi
I'm curious on this topic to.. i'm trying to add an iframe to the body-tag after the page has loaded and setting it's designMode to "on" (in firefox). Is this possible or does it need to be set for all iframes on onload?

Any suggestions?

@Torgeir: Is this possible or does it need to be set for all iframes on onload?
I haven't done anything with this stuff in ages so I'm not sure.

I have done the same thing as in create the iframe on the fly and then set the properties for it. I have found that you cannot set designmode on for Moz browsers straight away so use a try catch and a set timeout.

Also I have a problem that the caret/cursor keeps disapearing in the iframe and I cannot seem to find any code to force it to appear and move it to the end of the content especially when I have to reload the iframe through code (e.g to get round IEs non relative URI issue) does anyone have a solution for this?

function MakeEditable()
{
var theIframe = document.getElementById("myeditor")

theIframe.contentWindow.document.body.contentEditable = true;

//in moz you cannot change desgin mode straight away so try and then retry
try{
theIframe.contentWindow.document.designMode = "on";

}catch(e){
setTimeout(MakeEditable,250);
return false;
}


return true;
}

I've made an iframe editable in Firefox using contenteditable = true etc. but I want the text to appear in the same style as the rest of the page. If I include the stylesheet as the first part of the text in the iframe this works... but it seems to switch contenteditable off again. Which isn't much use. Any thoghts?

Thanks

@Dave: but it seems to switch contenteditable off again. Which isn't much use. Any thoghts?

I haven't looked at this stuff in ages. I have no idea.

What i am interested in knowing is if there is any way to tame the HTML generation that the browser emits. Ex: MSIE uses <P> for line breaks, Safari uses <div> and so seems to do ff. Opera only seems to use <BR> tags, not even <br />
What i would find good is a setting to precise a tag for new lines, having 60 div tags sucks!