CONTENTEDITABLE格与iframe中作出的富文本/所见即所得的编辑器

问题描述 投票：28回答：2

我试图权衡利弊使用<div>与<iframe>做出我自己的富文本/所见即所得编辑器的利弊。

这样做，为什么我不能只用一个CONTENTEDITABLE <div>，为什么那么多人喜欢<iframe>？

背景讨论：一种常见的方式去制作一个所见即所得的编辑器我的理解就是让一个div或iframe CONTENTEDITABLE，并随后做就包含股利或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>法似乎最好。任何强大的原因，我动心了吗？

javascript jquery wysiwyg contenteditable execcommand
2个回答
17
投票

原因iframe

Pros

  1. CSS隔离
  2. 安全隔离（我无法细节这一点，我重复读）

cons

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

就个人而言，我开发我自己的编辑，我选择把它放在一个iframe。

29
投票

首先，......不要试图使自己的所见即所得的编辑器，如果你正在考虑商业用途。它是一个个人项目一个很酷的想法，因为你可以学到很多东西，但它会带你年创造的编辑器，你就可以出售给别人，关心它是否真的有效，不只是看起来。我最近看到了一些非常酷的看着新的编辑器，但他们真的不工作。真。而这并不是因为他们的开发吸 - 这是因为浏览器吸。

OK，这是一个伟大的介绍，现在一些事实：

  1. 我的CKEditor的开发者之一。
  2. 它已经发展了10年左右。
  3. 我们仍然对我们的Trac约1数千个活动的问题。
  4. 我们不会在网络发展中吸：P。

现在的答案 - 除了什么添向下写到这里building a wysiwyg editor您可以读到我这个问题HTML WYSIWYG edtor: why is the editable content moved in an iFrame下写道：

基本上，你是安全的iframe，你有整个文档，内容不会泄露出你的编辑元素，你可以使用样式等，还有的iframe方法的几个缺点 - 它是重，引导代码是...真的靠谱，你不能继承样式的编辑器所连接的网站，我猜管理的重点可能是在这种情况下更困难，你必须支付在哪个文件要创建新元素的关注（有关只有在IE <8）。

请记住 - 除非你是像这样Paste as plain text Contenteditable div & textarea (word/excel...)问题准备不写你自己的编辑器：d

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.