javascript - 如何清理粘贴上的输入？一个小小的 WYSIWYG 编辑器

Question

嘿 Stackoverflow 社区，

我编写了一个示例代码，应该在粘贴时清理 HTML 代码，但它没有按预期工作。在每次粘贴时，它都会复制<textarea>并且粘贴不起作用。

这是 JsFiddle：http: //jsfiddle.net/Kxmaf/214/

任何帮助深表感谢 ：）

Answer 1

新版本：http: //jsfiddle.net/Kxmaf/218/

你是对的setTimeout()，不知道粘贴事件延迟。现在，我在 FF 上看到，这document.execCommand()有点错误，所以我简化了很多（不再关注，execCommand）：

$editor.on('paste, keydown', function() {
    var $self = $(this);            
    setTimeout(function(){ 
        var $content = $self.html();             
        $clipboard.val($content);
    },100);
});

---

这个怎么样：http: //jsfiddle.net/Kxmaf/215/

$editor.on('paste, keydown', function() {
     var $self = $(this),
         $content = $self.html();       
     $clipboard.val('').focus();
     document.execCommand('insertHTML', false, $content);
     $self.html($content);
     placeCaretAtEnd($self);                
});

没有了setTimeout()。我也添加了 keydown ，因为它对我来说听起来更好；）如果你愿意，你可以删除它。这样做：

• 获取#content 的内容
• 删除 textarea 内容并专注于它。
• 将 #content 中的内容插入到 textarea
• 替换#content的内容，以防它被删除或替换（这是我测试的一部分，我不知道$self.html($content);现在是否相关。
• 在#content 末尾添加插入符号。

placeCaretAtEnd()来自https://stackoverflow.com/a/4238971/460368我稍微修改了一下。