在execCommand中用'粘贴为纯文本'的Javascript技巧

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (14)

我有一个基本的编辑器,基于execCommand下面介绍的示例。有三种方法在execCommand区域内粘贴文本:

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

我想只允许粘贴纯文本而不使用任何HTML标记。我如何强制前两个动作粘贴纯文本?

可能的解决方案:我可以想到的方法是在粘贴之前为(Ctrl + V)设置关键事件的监听器并剥离HTML标签。

  1. 这是最好的解决方案吗?
  2. 避免粘贴任何HTML makup是否是防弹的?
  3. 如何将侦听器添加到右键单击 - >粘贴?
提问于
用户回答回答于

拦截paste事件,取消粘贴,并手动插入剪贴板的文本表示形式:http : //jsfiddle.net/HBEzc/。这应该是最可靠的:

  • 它捕捉各种粘贴(Ctrl + V,上下文菜单等)
  • 它允许您直接以文本形式获取剪贴板数据,因此您不必进行丑陋的黑客来替换HTML

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

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

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

    // insert text manually
    document.execCommand("insertHTML", false, text);
});
用户回答回答于

当然,这个问题已经得到解答,而且这个话题已经很老了,但我想提供我的解决方案,因为它很简单:

这是在我的contenteditable-div的粘贴事件中。

var text = '';
var that = $(this);

if (e.clipboardData)
    text = e.clipboardData.getData('text/plain');
else if (window.clipboardData)
    text = window.clipboardData.getData('Text');
else if (e.originalEvent.clipboardData)
    text = $('<div></div>').text(e.originalEvent.clipboardData.getData('text'));

if (document.queryCommandSupported('insertText')) {
    document.execCommand('insertHTML', false, $(text).html());
    return false;
}
else { // IE > 7
    that.find('*').each(function () {
         $(this).addClass('within');
    });

    setTimeout(function () {
          // nochmal alle durchlaufen
          that.find('*').each(function () {
               // wenn das element keine klasse 'within' hat, dann unwrap
               // http://api.jquery.com/unwrap/
               $(this).not('.within').contents().unwrap();
          });
    }, 1);
}

扫码关注云+社区