在 execCommand 中“粘贴为纯文本”的 Javascript 技巧

Question

在此处介绍的示例之后，我有一个基于 execCommand 的基本编辑器。在 execCommand 区域内粘贴文本有以下三种方式：

• Ctrl + V
• 右键单击->粘贴
• 右键单击->粘贴为纯文本

我想只允许粘贴没有任何 HTML 标记的纯文本。如何强制前两个操作粘贴纯文本？

可能的解决方案： 我能想到的方法是为（ Ctrl + V ）的键启动事件设置侦听器，并在粘贴之前去除 HTML 标签。

1. 这是最好的解决方案吗？
2. 避免粘贴中的任何 HTML 标记是防弹的吗？
3. 如何将侦听器添加到右键单击-> 粘贴？

原文由 Googlebot 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

它将拦截 paste 事件，取消 paste ，并手动插入剪贴板的文本表示：

http://jsfiddle.net/HBEzc/ 。这应该是最可靠的：

• 它捕获各种粘贴（ Ctrl + V ，上下文菜单等）
• 它允许您直接以文本形式获取剪贴板数据，因此您不必做丑陋的 hack 来替换 HTML。

不过，我不确定是否支持跨浏览器。

 editor.addEventListener("paste", function(e) {
    // cancel paste
    e.preventDefault();

    // get text representation of clipboard
    var text = (e.originalEvent || e).clipboardData.getData('text/plain');

    // insert text manually
    document.execCommand("insertHTML", false, text);
});

原文由 pimvdb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我无法在此处获得在 IE 中工作的公认答案，因此我进行了一些侦察并得出了这个在 IE11 以及最新版本的 Chrome 和 Firefox 中有效的答案。

 $('[contenteditable]').on('paste', function(e) {
    e.preventDefault();
    var text = '';
    if (e.clipboardData || e.originalEvent.clipboardData) {
      text = (e.originalEvent || e).clipboardData.getData('text/plain');
    } else if (window.clipboardData) {
      text = window.clipboardData.getData('Text');
    }
    if (document.queryCommandSupported('insertText')) {
      document.execCommand('insertText', false, text);
    } else {
      document.execCommand('paste', false, text);
    }
});

原文由 Jamie Barker 发布，翻译遵循 CC BY-SA 3.0 许可协议