前端富文本之Emoji表情包

前端富文本之Emoji表情包

【引言】

最近写的程序中的某个模块中需要添加一个 Emoji 表情包功能。

我们通过查阅资料得知平时使用的 Unicode 编码中就包含了上千个 Emoji 表情包。

可以通过访问 http://getemoji.com/  来查找自己想要的 Emoji表情。

关于使用的话,它可以有两种使用方式,一种是直接使用10进制( dec ),另一种是使用16进制( hex )。使用方法如下:

 🦁 //10进制方式
 🦁 //16进制方式

这两个都可以正常的显示狮子头 🥸 如果我们要更改其大小建议放在 p 标签内,使用 font-size 属性更改其大小。

由于我们是要做一个 Emoji 表情包功能,所以我们得使用较多的表情,所以我做了一个表情选择面板,将选择的表情插入到所输入的文本的最后。

【代码】

我们传统的输入框都是使用 textarea 或者 input 标签来制作的,它的优势是非常简单,但最大的缺陷却是无法展示图片。为了能够让输入框能够展示图片(富文本化),我们可以给 div 标签设置 contenteditable="true" 的属性,来让 div 标签实现可以编辑文本的功能。

<div id="messageInput" class="textarea" contenteditable="true"></div>
<aside id="messageFacePacket"></aside>

其中一小部分代码

接下来我们要选择一部分自己想要的 Emoji 表情,通过查表获取其值,最终我选定了从 [ &#128515; , &#128580; ]这个闭区间的所有值,即所有表情包。

然后我们遍历这个区间,获得其值,插入到相应的 DOM 节点中。

//获取表情包
function getEmoji(){
        messageFacePacket = "";
        for(i=128512;i<=128580;i++){
              messageFacePacket += "<p>&#"+i+"<span>"+i+"</span></p>";
        }
        document.getElementById("messageFacePacket").innerHTML = messageFacePacket;
}	

其中点击表情那个功能的时候弹出,存在就关闭的代码:

//打开or关闭表情包
openFacePacket = 0;
document.getElementById("openMessageFacePacket").addEventListener('touchend',function(){
	if(openFacePacket == 0){
	        openFacePacket = 1;
		document.getElementById("setStyle_contentMessageFacePacket").style.display = "block";
		document.getElementById("setStyle_contentConversationPageMessage").scrollIntoView();
	}else{
		openFacePacket = 0;
		document.getElementById("setStyle_contentMessageFacePacket").style.display = "none";
		document.getElementById("setStyle_contentConversationPageMessage").scrollIntoView();
         }	
});

然后我们需要通过自定义响应事件来获取并解析用户的操作:

document.getElementById("messageInput").addEventListener('keyup', function(evt) {
    if (evt.keyCode == 186) { //即;字符
        var doc = evt.target;
        var txt = doc.innerText || doc.textContent
        doc.innerHTML = (txt).replace("&amp;", "&"); //替换操作
        var sel = window.getSelection()
        var range = document.createRange()
        range.setStart(doc, 1);
        range.collapse(true)
        sel.removeAllRanges();
        sel.addRange(range);
    }
});

然后我们使用 CSS 对其进行样式渲染,我们就能得到这个美哒哒的效果啦:

1.png

【小结】

无。


回复列表



回复操作

正在加载验证码......

请先拖动验证码到相应位置

发布时间:2020-04-08 21:45:17

修改时间:2020-04-08 21:45:17

查看次数:100

评论次数:0