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

javascript html dom-events execcommand

2022-08-30 04:36:05

我有一个基于此处介绍的示例的基本编辑器。有三种方法可以在区域内粘贴文本：execCommandexecCommand

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

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

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

这是最好的解决方案吗？
在粘贴中避免任何HTML标记是否万无一失？
如何添加监听器右键单击 - >粘贴？

答案 1

它将截获事件，取消，并手动插入剪贴板的文本表示形式：
http://jsfiddle.net/HBEzc/。这应该是最可靠的：pastepaste

它捕获各种粘贴（+，上下文菜单等）CtrlV
它允许您直接以文本形式获取剪贴板数据，因此您不必进行丑陋的黑客来替换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);
});

答案 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);
    }
});