可编辑的div与iframe在制作富文本/所见即所得编辑器中的区别

Question

可编辑的div与iframe在制作富文本/所见即所得编辑器中的区别

javascriptjquerywysiwygcontenteditableexeccommand

32

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

在这样做时，为什么我不能只使用一个带有contenteditable属性的 <div>，而且为什么许多人更喜欢使用 <iframe> ?

背景讨论：据我所知，制作wysiwyg编辑器的常见方法是将div或iframe设为contenteditable，然后在包含div或iframe body的文档上执行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。虽然在 Webkit 浏览器中，我可以轻松地让这个 contenteditable/execCommand 组合在 div/iframe 上工作，但是在 Firefox 中却非常困难。现在我不得不采用加载脚本和样式表到 iframe 中的方式，并进行各种无聊的操作，以复制我在基于 div 的版本中轻松实现的功能。所以基于 <div> 的方法似乎更可取。有什么强烈的理由让我重新考虑吗？

- tim peterson

1

可能是构建所见即所得编辑器的重复问题。 - AlfonsoML

嗨，AlfonsoML，感谢提供链接，不幸的是它没有解决问题的核心，即我无法轻松地让Firefox与iframes中的contenteditable配合使用。我不想为此浏览器编写完全不同的代码集，所以我想知道为什么不能使用div代替iframe。 - tim peterson

1

此外，这个链接已经有一年半的历史了。自那时以来，浏览器发生了很大变化，我对支持旧版浏览器的兴趣也在逐渐减少。 - tim peterson

2

虽然您可能认为这个链接已经“老旧”，但事实上，浏览器在contentEditable方面并没有太大的改变。他们正在逐步改进它，但是你仍然需要一堆代码来使其在不同的浏览器中以相同的方式工作。Tim Down的答案提供了一个概述（以及关于iframe vs div的答案），但最重要的部分在开头：正确地完成需要大量的时间和精力。除非您只是想学习，否则您应该选择现有的编辑器之一。 - AlfonsoML

2

我知道这个问题已经存在一段时间了，但是你的iframe的HTML代码有误 - 在<iframe>标签之间的代码在浏览器不支持<iframe>标签时被渲染，而不是属于它的内容; 这样你的iframe根本没有可编辑的内容可以访问。 - Tomalla

显示剩余4条评论

2个回答

19

`iframe` 标签的理由

优点

CSS 隔离
安全隔离（我无法详细说明此点，只能重复阅读到的内容）

缺点

更重（但不至于显著/明显）
从 JavaScript 中访问更困难。

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

- Benibur

由于富文本编辑器正在创建HTML标记，因此安全问题的一个示例是，编辑器中动态生成的标记缺少或格式不正确的闭合标记可能会破坏整个文档。IFrame解决了这个问题，因为损坏的标记无法影响其自身文档之外的任何内容。请参考下面Reinmar的答案，其中包含更多信息！ - alegscogs

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Reinmar · Accepted Answer

首先... 如果你考虑商业用途，不要尝试制作自己的所见即所得编辑器。对于个人项目来说，这是一个很酷的想法，因为你可以学到很多东西，但是要创建一个能够真正有效工作而不仅仅是外观的编辑器，需要花费数年的时间。我最近看到了一些外观非常酷的新编辑器，但它们实际上并不起作用。确实如此。这不是因为它们的开发者不行，而是因为浏览器不行。

好了，那是一段很棒的介绍，现在是一些事实：

我是CKEditor的开发人员之一。
它已经开发了大约10年。
我们仍然有约1,000个活跃问题需要解决。
我们在网页开发方面不差 :P。

现在是答案 - 除了Tim Down在这里写的构建所见即所得编辑器，你还可以阅读我在这个问题下面写的内容：HTML所见即所得编辑器：为什么可编辑内容被移动到iFrame中

基本上，在iframe中更安全，你拥有整个文档，内容不会泄露出你的可编辑元素，你可以使用样式等。此外，iframe方法也有一些缺点 - 它更重，引导代码很棘手，你不能继承编辑器连接到的网站的样式，我猜在这种情况下管理焦点可能更困难，并且你必须注意在哪个文档中创建新元素（仅关于IE＜8有效）。

记住 - 除非你准备好像这个问题将粘贴为纯文本Contenteditable div& textarea（word / excel...）一样遇到问题，否则不要编写自己的编辑器:D

可编辑的div与iframe在制作富文本/所见即所得编辑器中的区别

iframe 标签的理由

优点

缺点

`iframe` 标签的理由