32

我正在尝试权衡在制作我自己的富文本/所见即所得编辑器时使用<div>vs.的利弊。<iframe>

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

背景讨论：据我所知，制作所见即所得编辑器的一种常见方法是使 div 或 iframe内容可编辑，然后execCommand在包含 div 或 iframe 正文的文档上执行以使其文本粗体或其他内容。

这是HTML：

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

与：

<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); 
});

与：

$(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>基于 - 的方法似乎更可取。我重新考虑有什么强有力的理由吗？

4

2 回答 2

31

首先...如果您正在考虑商业用途，请不要尝试制作自己的所见即所得编辑器。对于个人项目来说，这是一个很酷的想法，因为您可以学到很多东西，但是您需要数年时间来创建编辑器，您将能够将其出售给关心它是否真的有效的人，而不仅仅是外观。我最近看到了一些看起来很酷的新编辑器，但它们确实不起作用。真的。这并不是因为他们的开发人员很糟糕——而是因为浏览器很糟糕。

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

  1. 我是 CKEditor 的开发人员之一。
  2. 它已经开发了大约 10 年。
  3. 我们的 Trac 上仍有大约 1000 个活跃问题。
  4. 我们不喜欢网络开发：P。

现在答案 - 除了 Tim Down 在这里写的构建所见即所得编辑器之外，您还可以阅读我在这个问题下写的内容 HTML WYSIWYG edtor:Why is the editable content move in an iFrame

基本上，在 iframe 中你更安全，你有整个文档，内容不会从你的可编辑元素中泄漏出来，你可以使用样式等。iframe 方法也有一些缺点 - 它更重，引导代码是......真的很棘手，你不能继承编辑器所附加的网站的样式，我想在这种情况下管理焦点可能会更困难，你必须注意你在哪个文档中创建新元素（仅在 IE<8) 中相关。

请记住 - 不要编写自己的编辑器，除非您已准备好解决此类问题粘贴为纯文本 Contenteditable div & textarea (word/excel ...) :D

于 2012-07-13T23:03:02.230 回答
19

原因iframe

优点

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

缺点

  1. 较重（但不是显着/明显的点）
  2. 更难从 JavaScript 访问。

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

于 2012-07-12T11:36:26.643 回答