onPaste e.preventDefault 在 Chrome 上失败

Question

我在 Summernote 中遇到了 contenteditable 问题。

Codepen：http://codepen.io/anon/pen/LkLYvV

当前行为： Safari/Firefox - 粘贴图像时，仅显示“不允许粘贴”，但在 Chrome 上，它会与图像粘贴一起显示“不允许粘贴”。

预期行为：完全禁用图像粘贴。

这似乎指出了 Chrome 中粘贴事件的问题。

我想阻止粘贴图像，所以我添加了 e.preventDefault 但 chrome 仍然粘贴图像。下面是我的代码和一些用于调试行为的 console.log。还有其他方法可以防止chrome粘贴吗？

 $('#summernote').summernote({
        height: 300,
        minHeight: 300,
        toolbar: [
            // [groupName, [list of button]]
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['fontsize', ['fontsize']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert',['link','picture']]

        ],


        callbacks : {

            onPaste: function (e) {
                e.preventDefault();
                console.log('pasting'); // Chrome shows This

                var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text'); //This actually removes the image because image is not text.



        console.log(bufferText); //Chrome Shows Empty
        console.log(typeof bufferText); //Chrome Shows String
        console.log(bufferText.length); //Chrome Shows 0
        if (bufferText.length == 0) {
            console.log ('in if loop'); //Chrome Shows this in Console

            document.execCommand('insertText', false, 'Paste Not Allowed'); //Chrome wrote "Paste Not Allowed" in contenteditable but the image still get pasted.
            return false;
        }
                if (!bufferText)
                    return true;

                document.execCommand('insertText', false, bufferText);
            }

        }


    });

更新：抛出新错误以防止默认。

目前这是我暂时所做的。如果有人能提出一种比抛出错误来停止默认操作更好的方法就好了。

看来这个安全设置/chrome浏览器，我必须添加一些东西来获取bufferText

var bufferText = ((ne.originalEvent || ne).clipboardData || window.clipboardData).getData('text/plain') || null;

        if (bufferText == null) {
            throw new Error("Cannot Paste Image");

        }

通过抛出新错误，我可以停止发布图像，但我可以允许所有其他形式的文本。

Answer 1

在回调结束时

onPaste

，放一个

return false;

它应该可以工作。这就是我用的方式而不是

e.preventDefault()

Answer 2

event.preventDefault()

对我有用，但我必须确保它被同步调用。

async function onPaste(event) {
  event.preventDefault(); // It works
}

async function onPaste(event) {
  await readPaste(event);
  event.preventDefault(); // It won't work
}

那

await

打破了它