Javascript Contenteditable div vs. iframe 制作富文本/所见即所得编辑器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10162540/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Contenteditable div vs. iframe in making a rich-text/wysiwyg editor
提问by tim peterson
i'm trying to weigh the pros and cons of using a <div>vs. <iframe>in making my own rich text/wysiwyg editor.
我正在尝试权衡使用<div>vs.<iframe>制作我自己的富文本/所见即所得编辑器的利弊。
In doing so, why can't I just use a contenteditable<div>and why do so many people prefer the <iframe>?
在这样做时，为什么我不能只使用contenteditable<div>，为什么这么多人更喜欢<iframe>？
Background discussion:
A common way to go about making a wysiwyg editor as I understand is to make a div or iframe contenteditableand to then to do execCommandon the document containing the div or the iframe body to make its text bold or whatever.
背景讨论：按照我的理解，制作所见即所得编辑器的一种常见方法是制作一个 div 或 iframe内容可编辑，然后对execCommand包含 div 或 iframe 正文的文档进行处理，使其文本加粗或其他。
Here's the HTML:
这是 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:
和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/execCommandcombo 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。虽然我可以很容易地让这个contenteditable/ execCommandcombo 在 Webkit 浏览器中的 div/iframe 上工作，但我有一个地狱般的时间试图让 iframe 在 Firefox 中工作。我不得不求助于将脚本和样式表加载到 iframe 和各种废话来复制我可以使用基于 div 的版本轻松完成的工作。所以<div>基于-的方法似乎更可取。我重新考虑的任何强有力的理由？
采纳答案by Benibur
Reasons for the iframe
原因 iframe
Pros
优点
- CSS isolation
- Security isolation (I am not able to detail this point, I repeat what I read)
- CSS隔离
- 安全隔离（我无法详细说明这一点，我重复我读过的内容）
cons
缺点
- Heavier (but not to a significant/ noticeable point)
- More difficult to access from JavaScript.
- 更重（但不是很明显/很明显）
- 更难从 JavaScript 访问。
Personally, I developed my own editor and I choose to put it in an iframe.
就个人而言，我开发了自己的编辑器，并选择将它放在iframe.
回答by Reinmar
First of all... Don't try to make your own WYSIWYG editor if you're thinking about commercial use. It's a cool idea for a personal project, because you can learn a lot, but it will take you years to create editor that you will be able to sell to someone that cares about if it really works, not just looks. I've seen recently some really cool looking new editors, but they really doesn't work. Really. And that's not because their developers suck - it's because browsers suck.
首先...如果您正在考虑商业用途，请不要尝试制作自己的 WYSIWYG 编辑器。对于个人项目来说，这是一个很酷的想法，因为您可以学到很多东西，但是创建编辑器需要数年时间，您可以将其出售给关心它是否真的有效的人，而不仅仅是外观。我最近看到了一些看起来很酷的新编辑器，但它们确实不起作用。真的。这不是因为他们的开发人员很烂——而是因为浏览器很烂。
OK, that was a great intro, now some facts:
好的，这是一个很好的介绍，现在是一些事实：
- I'm one of CKEditor's devs.
- It's been developed for around 10 years.
- We still have around 1 thousand active issues on our Trac.
- We don't suck in web developing :P.
- 我是 CKEditor 的开发人员之一。
- 它已经开发了大约 10 年。
- 我们的 Trac 上仍有大约 1000 个活跃问题。
- 我们不擅长网络开发：P。
Now the answer - in addition to what Tim Down wrote here building a wysiwyg editoryou can read what I wrote under this question HTML WYSIWYG edtor: why is the editable content moved in an iFrame
现在答案 - 除了 Tim Down 在这里写的构建所见即所得编辑器之外，您还可以阅读我在这个问题下写的内容 HTML WYSIWYG 编辑器：为什么可编辑内容在 iFrame 中移动
Basically, in an iframe you're safer, you've got entire document, content won't leak out of your editable element, you can use styles, etc. There are also few drawback of the iframe approach - it's heavier, bootstrap code is... really tricky, you can't inherit styles of the website to which editor is attached, I guess that managing focus may be more difficult in this case and you have to pay attention in which document you're creating new elements (relevant only in IE<8).
基本上，在 iframe 中你更安全，你有整个文档，内容不会从你的可编辑元素中泄漏出来，你可以使用样式等。 iframe 方法也有一些缺点 - 它更重，引导代码是...真的很棘手，您不能继承编辑器所附加网站的样式，我想在这种情况下管理焦点可能会更困难，您必须注意要在哪个文档中创建新元素（仅在 IE<8 中相关）。
And remember - don't write your own editor unless you're prepared for problems like this Paste as plain text Contenteditable div & textarea (word/excel...):D
记住 - 不要编写自己的编辑器，除非你准备好解决像这样的问题粘贴为纯文本 Contenteditable div & textarea (word/excel ...):D
