在制作富文本/所见即所得编辑器时，Contenteditable div与iframe

Question

i'm trying to weigh the pros and cons of using a <div> vs. <iframe> in making my own rich text/wysiwyg editor. 我正在尝试权衡使用<div>与<iframe>制作我自己的富文本/ wysiwyg编辑器的优缺点。

In doing so, why can't I just use a contenteditable <div> and why do so many people prefer the <iframe> ? 这样做，为什么我不能只使用一个满足的 <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. 背景讨论：根据我的理解，制作一个所见即所得编辑器的常用方法是使div或iframe 满足，然后对包含div或iframe主体的文档执行execCommand以使其文本变为粗体或其他。

Here's the HTML: 这是HTML：

<html><!--parent doc-->
  <body><button type="button" class="btn-bold">Bold</button>
       <div contenteditable="true"></div>
  </body>
</html>

vs.: 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.: 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. 看起来大多数制作精良的富文本编辑器都使用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. 虽然我可以很容易地将这个contenteditable / execCommand组合用于Webkit浏览器中的div / iframe，但是我有一个地狱般的时间试图让iframe在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. 我不得不求助于将脚本和样式表加载到iframe和各种废话中来复制我可以使用基于div的版本轻松完成的任务。 So the <div> -based method seems preferable. 所以基于<div>的方法似乎更可取。 Any strong reasons I reconsider? 我重新考虑任何有力的理由？

Answer 1

First of all... Don't try to make your own WYSIWYG editor if you're thinking about commercial use. 首先......如果您正在考虑商业用途，请不要尝试制作自己的WYSIWYG编辑器。 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. 这不是因为他们的开发人员很糟糕 - 这是因为浏览器很糟糕。

OK, that was a great intro, now some facts: 好的，这是一个很棒的介绍，现在有些事实：

I'm one of CKEditor's devs. 我是CKEditor的开发人员之一。
It's been developed for around 10 years. 它已经开发了大约10年。
We still have around 1 thousand active issues on our Trac. 我们的Trac仍有大约1千个活跃问题。
We don't suck in web developing :P. 我们不喜欢网络开发：P。

Now the answer - in addition to what Tim Down wrote here building a wysiwyg editor you 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

Answer 2

Reasons for the `iframe` `iframe`原因

Pros 优点

CSS isolation CSS隔离
Security isolation (I am not able to detail this point, I repeat what I read) 安全隔离（我无法详细说明这一点，我重复我读到的内容）

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 。

在制作富文本/所见即所得编辑器时，Contenteditable div与iframe

问题描述

2 个解决方案

解决方案1
29 2012-07-13 23:03:02

解决方案2
17 已采纳 2012-07-12 11:36:26

Reasons for the `iframe` `iframe`原因

Pros 优点

cons 缺点

在制作富文本/所见即所得编辑器时，Contenteditable div与iframe

问题描述

2 个解决方案

解决方案1 29 2012-07-13 23:03:02

解决方案2 17 已采纳 2012-07-12 11:36:26

Reasons for the iframe iframe原因

Pros 优点

cons 缺点

解决方案1
29 2012-07-13 23:03:02

解决方案2
17 已采纳 2012-07-12 11:36:26

Reasons for the `iframe` `iframe`原因