HPW仅允许将表情符号图像用于内容可编辑的div粘贴

Question

I try to make my content-editable div working like Facebook, By preventing any HTML tags but accept only emoji images (not any images just images that have class .emoji) to can users submit this emojis normally.

This is the code that i used:

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标签（仅来自服务器）。