i'm trying to weigh the pros and cons of using a <div> vs. <iframe> in making my own rich text/wysiwyg editor.
In doing so, why can't I just use a contenteditable <div> and why do so many people prefer the <iframe> ?
Background discussion:
A common way to go about making a wysiwyg editor as I understand is to make a div or iframe contenteditable and to then to do execCommand on the document containing the div or the iframe body to make its text bold or whatever.
Here's the HTML:
<html><!--parent doc-->
<body><button type=button class=btn-bold>Bold</button>
<div contenteditable=true></div>
</body>
</html>
vs.:
<html><!--parent doc-->
<body><button type=button class=btn-bold>Bold</button>
<iframe>
<body contenteditable=true></body>
</iframe>
</body>
</html>
and the JS:
$(document.body).on('click', '.btn-bold', function(){
document.execCommand('bold', false, null);
});
vs.:
$(document.body).on('click', '.btn-bold', function(){
window.frames[0].document.body.execCommand('bold', false, null);
});
It looks like most well-made rich-text editors use an iframe. While I can easily get this contenteditable /execCommand combo to work on a div/iframe in Webkit browsers, I'm having a hellish time trying to get the iframe to work in Firefox. I'm having to resorting to loading scripts and stylesheets into the iframe and all sorts of nonsense to duplicate what I can easily accomplish with the div-based version. So the <div>-based method seems preferable. Any strong reasons I reconsider?
