用 emoji-mart 替换 twikoo 的 emoji 选择器
September 10, 2022
前言
我用 twikoo 也有好几年了,说实话从 idisqus 换过来后使用起来的感觉是非常舒适的,后来也试过 valin (好像是这个名字) 之类的其他自建评论工具,但是使用起来觉得没有 twikoo 舒服,还是很推荐这个评论工具的。
但是,twikoo 的表情工具说实话是有些简陋的,虽然可以自定义 Emotion.json 来丰富可用的表情列表。但是界面不美观,可选择范围始终太窄,所以今天折腾一下它。
emoji-mart
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的原生表情功能
待完善
因为目前的 emoji-mart 没办法动态改变主题,所以目前暂时还没有实现主题的联动,希望作者后续能进行改进。
参考链接
加入评论