html Hpw只允许在粘贴和拖放时将emoji图像用于可供内容使用的div

0qx6xfy6  于 2022-11-20  发布在  其他
关注(0)|答案(1)|浏览(111)

我试着让我的内容可编辑的div像Facebook一样工作,通过防止任何HTML标签,但只接受表情图片(不是任何图片只是有类的图片。表情),可以让用户提交这个表情正常。
这是我使用的代码:

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);
vsdwdz23

vsdwdz231#

Facebook有一个不同的方法,它使用跨度与unicode emoji和覆盖它的跨度与图像到相同的emoji..但关于你的问题,我已经实现了它不同..防止粘贴事件到您的contenteditable区域,只是从剪贴板中的文本没有任何标签,关于emoji,它只会从你的下拉菜单或popover或其他附加。现在你只能在文本框中添加表情符号,但遗憾的是,你不能复制粘贴它,除非你找到一种方法,在粘贴时应用验证,只允许从服务器上粘贴带有特定模式和特定源代码的img标签唯一的。

相关问题