javascript - Google plus 是如何在 contenteditable div 处实现 Javascript 明文 "paste"的？

Question

我在 Stack Overflow 中看到了很多答案，解释了我们如何通过监听 keydown 事件并将焦点重定向到位于屏幕外的文本区域来删除文本粘贴的格式。这个解决方案很好，但没有解决使用上下文菜单或浏览器菜单进行粘贴的问题。

Google Plus 确实使用 contenteditable div 作为用户帖子的编辑器，即使使用上下文菜单，那里的粘贴也能正常工作。有谁知道他们是如何取得这个好成绩的？

Answer 1

我做了一些测试，我认为我能够重现该行为。我只使用 Google Chrome 和 Firefox 测试过这个解决方案，所以它可能在许多浏览器中都有问题。我怀疑 Google Plus 在无法使用此技术时会优雅地降低用户体验。

为实现此功能，我在粘贴事件期间将焦点重定向到屏幕外的一个 div。 div接收到粘贴的内容，超时后，我得到div的文本(使用jquery去除html标签)。示例代码:

var object = this;     
this.$editable.on("paste", function(evt) {
    object.saveCursorPosition();
    var textarea= $("<div contenteditable></div>");
    textarea.css("position",  "absolute").css("left", "-1000px").css("top", object.$editable.offset().top + "px").attr("id","pasteHelper").appendTo("body");
    textarea.html('<BR>');
    textarea.focus();

    setTimeout(function() {
        object.$editable.focus();
        object.restoreCursorPosition();
        object.insertTextAtCursor(textarea.text());
        textarea.remove();
    }, 0);


});