Question

我正在尝试权衡使用<div>与<iframe>制作我自己的富文本/ wysiwyg编辑器的利弊。

这样做，为什么我不能只使用 contenteditable <div>为什么这么多人更喜欢<iframe>？

背景讨论：根据我的理解，制作一个wysiwyg编辑器的常用方法是制作div或iframe contenteditable ，然后对包含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。虽然我可以很容易地将这个 contenteditable / execCommand组合用于Webkit浏览器中的div / iframe，但我还是在尝试让iframe在Firefox中运行时有一段时间。我不得不求助于将脚本和样式表加载到iframe和各种废话中来复制我可以使用基于div的版本轻松完成的任务。所以基于<div>的方法似乎更可取。我重新考虑任何有力的理由？

Answer 1

首先......如果您正在考虑商业用途，请不要尝试制作自己的WYSIWYG编辑器。对于个人项目来说这是一个很酷的主意，因为你可以学习很多，但是你需要花费数年时间来创建编辑器，你可以将它卖给关心它是否真的有效的人，而不是只是看起来我最近看到一些看起来很酷的新编辑，但它们真的不起作用。真。这不是因为他们的开发人员很糟糕 - 这是因为浏览器很糟糕。

好的，这是一个很棒的介绍，现在有些事实：

我是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方法也有一些缺点 - 它更重，bootstrap代码是......真的很棘手，你不能继承编辑所附的网站的样式，我想在这种情况下管理焦点可能会更加困难，你必须注意你正在创建哪个文档新元素（仅与IE＆lt; 8相关）。

请记住 - 除非你为这样的问题做好准备，否则不要自己编写编辑器Paste as plain text Contenteditable div & textarea (word/excel...)：D

Answer 2

`iframe`

的原因

赞成

CSS隔离
安全隔离（我无法详细说明这一点，我重复我读到的内容）

缺点

较重（但不是重要/明显的一点）
更难以从JavaScript访问。

就个人而言，我开发了自己的编辑器，并选择将其放入iframe。

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

2 个答案:

`iframe`

赞成

缺点