Question

我尝试使我的内容可编辑div像Facebook一样工作，通过阻止任何HTML标记但只接受表情符号图像（不是任何图像只是具有类.emoji的图像），用户可以正常提交此表情符号。

这是我使用的代码：

var ediv = document.getElementById("div");

function noHTML() {
    setTimeout(function() {
        var str1 = ediv.innerText.replace(/\n/g,"");

        var str2 = ediv.innerHTML.replace(/<br>/g,"");

        if (str1 != str2) {
            ediv.innerText = ediv.innerText;
        }

    }, 1);
}

ediv.addEventListener("drop", noHTML);

ediv.addEventListener("paste", noHTML);

ediv.addEventListener("copy", function(e) {
    noHTML();
    if (e.clipboardData) {
        var text = window.getSelection().toString();
        e.preventDefault();
        e.clipboardData.setData('Text', text);
    }
});

ediv.addEventListener("focus", noHTML);

ediv.addEventListener("blur", noHTML);

Answer 1

Facebook有一种不同的方法，它使用带有Unicode表情符号的跨度，并在跨度上用图像覆盖同一表情符号..但是关于您的问题，我实施方式有所不同..防止将粘贴事件粘贴到您的contenteditable区域，从剪贴板中获取没有任何标签的文本，并且关于表情符号的信息仅会在您的下拉菜单或弹出菜单中添加。..现在，您只能将表情符号添加到文本框中，但遗憾的是，除非找到解决方法，否则您无法复制粘贴它将验证应用于仅允许带有特定模式和特定src的img标签的粘贴操作。

Hpw只允许表情符号图像为粘贴和丢弃的contenteditable div

1 个答案: