用emoji-mart替换twikoo的emoji选择器

用emoji-mart替换twikoo的emoji选择器

2022-09-10
#分享

前言

我用twikoo也有好几年了,说实话从idisqus换过来后使用起来的感觉是非常舒适的,后来也试过valin(好像是这个名字)之类的其他自建评论工具,但是使用起来觉得没有twikoo舒服,还是很推荐这个评论工具的。

但是,twikoo的表情工具说实话是有些简陋的,虽然可以自定义Emotion.json来丰富可用的表情列表。但是界面不美观,可选择范围始终太窄,所以今天折腾一下它。

emoji-mart

GitHub - missive/emoji-mart: 🏪 One component to pick them all
🏪 One component to pick them all. Contribute to missive/emoji-mart development by creating an account on GitHub.

emoji-mart是github上开源的一个emoji前端组件,基本上和现在手机上输入法使用的emoji功能一致,而且提供的emoji图标更为丰富,包含以下特性

  • 多平台emoji源:Native、apple、facebook、google、twitter..
  • light和dark主题颜色
  • 和指定任意版本emoji
  • 本地化(有中文,但是我上传到服务上后又不显示中文了...)
  • 多肤色
  • 可以快捷搜索emoji
  • 等等..

总的来说是一款相当优秀的开源工具,但是无法动态更改主题颜色(可能是我的使用方式不对,希望有大佬指证),也有外国人吐槽过这个组件,那个人还另外写了另外一个工具:emoji-picker-element

如何集成到twikoo

利用twikoo的init的回调事件 onCommentLoaded 我们可以在评论加载完成后开始集成emoji-mart。

💡
注意:twikoo的onCommentLoaded其实twikoo并没有完全加载完毕,经过我的测试twikoo原生的表情功能是在这个事件结束后才开始调用的,所以这里要 关闭掉twikoo的原生表情功能 
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js">
引入emoji-mart库
<div id="tcomment"></div>
<script>twikoo.init({ 
	envId: '{{@custom.disqus_shortname}}', 
	el: '#tcomment',
	onCommentLoaded: function () {
			console.log('评论加载完成');

			//初始化自定义emojimart
			const pickerOptions = { 
				onEmojiSelect: function(d){ $('.el-textarea__inner').val($('.el-textarea__inner').val() + d.native)  },
				locale: 'zh',theme : 'dark'
			}
			const picker = new EmojiMart.Picker(pickerOptions)
            //把html注入网页内
			$('.tk-row-actions-start').append(picker)
        	//因为div默认不能使用focus事件,加上tabindex才可以
			$('em-emoji-picker').attr('tabindex','5')
			$('.OwO').show().click(function(){
				$('em-emoji-picker').toggle()
				$('em-emoji-picker').focus()
			})
			$('em-emoji-picker').blur(function(){
				$('em-emoji-picker').toggle()
			})
			
		}
	})
	
</script>
进行初始化
em-emoji-picker{
    display: none;
    position: absolute;
    top: 3rem;
    z-index: 2;
}
增加一点简单的样式处理
效果图

待完善

因为目前的emoji-mart没办法动态改变主题,所以目前暂时还没有实现主题的联动,希望作者后续能进行改进。

参考链接

加入评论