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