用emoji-mart替换twikoo的emoji选择器
1900发表于 2022-09-10 12:47:47
前言
我用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.
missiveemoji-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"><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没办法动态改变主题，所以目前暂时还没有实现主题的联动，希望作者后续能进行改进。