在制作富文本/所见即所得编辑器时，Contenteditable div与iframe [英] Contenteditable div vs. iframe in making a rich-text/wysiwyg editor
问题描述
我正在尝试权衡使用< div> 与< iframe> 制作我自己的富文本/ wysiwyg编辑器。
i'm trying to weigh the pros and cons of using a <div> vs. <iframe> in making my own rich text/wysiwyg editor.
这样做，为什么我不能只使用 contenteditable < div> 为什么这么多人更喜欢< iframe> ？
In doing so, why can't I just use a contenteditable <div> and why do so many people prefer the <iframe> ?
后台讨论：
根据我的理解，制作一个所见即所得编辑器的常用方法是制作一个div或iframe contenteditable 然后再做 execCommand 在包含div或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.
这是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在Firefox中运行。我不得不求助于将脚本和样式表加载到iframe和各种废话中来复制我可以使用基于div的版本轻松完成的任务。所以基于< div> 的方法似乎更合适。我重新考虑的任何有力理由？
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?
推荐答案
iframe 的原因
优点
Reasons for the iframe
Pros
- CSS隔离
- 安全隔离（我不能详细说明这一点，我重复我读到的内容）
缺点
cons
- 较重（但没有显着/显着点）
- 更难以从JavaScript访问。
就个人而言，我开发了自己的编辑器，并选择将其放入 iframe 。
Personally, I developed my own editor and I choose to put it in an iframe.
这篇关于在制作富文本/所见即所得编辑器时，Contenteditable div与iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
