Html 编辑器粘贴内容过滤技术详解

作者：Tony Qu
最近在解决数据粘贴方面取得了不少进展，作为Html在线编辑器所必须具备的技术，在这里详细给大家介绍并提供实现参考。在研究过程中，我也确实走了不少弯路，尝试了n种方式，由于美国的PM始终觉得有些影响用户体验的东西无法接受，导致好几个提案被否定，不过收获还是很丰富的。
我现在写code喜欢需求驱动，让我们来看看这项技术的主要需求
* 能够过滤用户贴进来的纯文本数据
* 能够过滤用户贴进来的html数据（未经Html编码）
* 能够过滤用户贴进来的Word数据，并能把大部分Word格式保留下来。
* 在这一过程中尽量不要让用户知道我们在做过滤
* 不要去提示用户是否启用某种权限
本例所适用的场景为使用iframe实现的Html编辑器，而不是文本框(textarea或type为text的input）。

在研究过程中，我主要参考了tinymce、ckeditor，但最后我还是选择了tinymce的实现方法，具体原因在你看完下面这段文字后就会明白。
ckeditor的实现方式是在onpaste事件触发时，从剪贴板取出数据，处理取出的文本，然后再把处理好的文本存入剪贴板。有人说，那我能不能在onpaste中直接取消paste动作，然后自己把获得的内容放入iframe当中去，我当时就干过这事，但结果却出人意料，直接从剪贴板拿出的数据是不包括格式信息的文本，特别是从Word粘贴过来的数据，纯文本，颜色、布局等数据都不存在，这样的话，你的用户只能粘贴没有格式的数据过来，然后自己重新在Html编辑器里面编辑。但是如果让浏览器自己去做粘贴，格式信息都会保留，浏览器会自动把Word的粘贴数据转换为xml数据，放入dom中。所以为了保留格式信息，我们恐怕只能通过浏览器的标准粘贴行为的帮助实现这一点。
另外ckeditor的实现在Firefox中有一个致命的弱点，如果你要从剪贴板读写数据，你就必须提示用户自己去设置一个叫signed.applets.codebase_principal_support的权限，javascript脚本是没有权限去设置的，虽然从技术人员来看这是很正常的，但是很多产品经理无法接受这一点，至少我的产品经理是这么认为的。
以下是ckeditor获取和设置剪贴板的代码，供大家参考。
ifmTemp.conte