我正在权衡在制作自己的富文本/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>
的方法似乎更可取。有什么强烈的理由让我重新考虑吗?
contenteditable
配合使用。我不想为此浏览器编写完全不同的代码集,所以我想知道为什么不能使用div代替iframe。 - tim peterson