我正在尝试权衡使用 <div> 与 <iframe> 制作我自己的富文本/所见即所得编辑器的优缺点 .
这样做，为什么我不能只使用一个满足的 <div> 为什么这么多人更喜欢 <iframe> ？
背景讨论：根据我的理解，制作一个所见即所得编辑器的常用方法是使div或iframe满足，然后在包含div或iframe主体的文档上做 execCommand 以使其文本变为粗体或其他 .
这是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>
和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);
});
看起来大多数制作精良的富文本编辑器都使用iframe . 虽然我可以轻松地在Webkit浏览器中使用这个contenteditable / execCommand 组合来处理div / iframe，但是我不得不求助于将脚本和样式表加载到iframe中以及各种废话来复制我可以用div轻松完成的任务基于版本 . 所以基于_1543653的方法似乎更可取 . 我重新考虑任何有力的理由？
2 回答
iframe的原因
优点
CSS隔离
安全隔离（我无法详细说明这一点，我重复我读到的内容）
缺点
较重（但不重要）
更难以从JavaScript访问 .
就个人而言，我开发了自己的编辑器，我选择将其放入
iframe.首先......唐't try to make your own WYSIWYG editor if you'重新考虑商业用途 . 对于个人项目来说这是一个很酷的主意，因为你可以学习 a lot ，但是你需要花费数年的时间来创建编辑器，你可以将它卖给关心它是否真的有效的人，而不仅仅是外观 . 我've seen recently some really cool looking new editors, but they really doesn'工作 . 真 . 那个's not because their developers suck - it'因为浏览器很糟糕 .
好的，这是一个很棒的介绍，现在有些事实：
我'm one of CKEditor'开发者 .
它已经开发了大约10年 .
我们的Trac仍有大约1千个活跃问题 .
我们不喜欢网络开发：P .
现在回答 - 除了Tim Down在这里写的内容之外building a wysiwyg editor你可以阅读我在这个问题下所写的内容HTML WYSIWYG edtor: why is the editable content moved in an iFrame
基本上，在iframe中你更安全，你有整个文档，内容不会从你的可编辑元素中泄漏，你可以使用样式等 . iframe方法也有一些缺点 - 它更重，引导代码是......真的很棘手，你不能继承编辑所附网站的风格，我想在这种情况下管理焦点可能会更加困难，你必须注意你正在创建新元素的文档（仅与IE <8相关 .
请记住 - 不要为这样的问题做好准备Paste as plain text Contenteditable div & textarea (word/excel...)：D