前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >将Emoji表情添加到项目中 顶

将Emoji表情添加到项目中 顶

作者头像
linapex
发布2019-03-26 10:14:03
1.8K0
发布2019-03-26 10:14:03
举报
文章被收录于专栏:区块链实战区块链实战

哈哈,进入正题,项目需要发emoji表情,于是,我的任务开始了~

效果图镇楼

选择完需要的表情,点击消息预览就可以看到效果了,有一个微笑表情是QQ表情~~ 可以不用管它。

找了跟emoji相关了好多插件,找到了 jQuery_EmojiPicker 这个插件,然后研究了一下。

源下载地址

http://www.jb51.net/jiaoben/375022.html

插件修改

1.插件初始化后将其原本的输入框隐藏。

index.html,67行。

代码语言:javascript
复制
<script>
    $(function() {
      // Initializes and creates emoji set from sprite sheet
      window.emojiPicker = new EmojiPicker({
        emojiable_selector: '[data-emojiable=true]',
        assetsPath: 'lib/img/',
        popupButtonClasses: 'fa fa-smile-o'
      });
      // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
      // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
      // It can be called as many times as necessary; previously converted input fields will not be converted again
      window.emojiPicker.discover();
	  $(".emoji-wysiwyg-editor").hide();
    });
  	</script>

2.点击某个表情小图标时,将值写入指定控件。

jquery.emojiarea.js,617行。

代码语言:javascript
复制
this.$menu.on('click', 'a', function(e) {
      self.emojiarea.updateBodyPadding(self.emojiarea.$editor);
			/*
			 * ! MODIFICATION START Following code was modified by Andre Staltz,
			 * to capture clicks on category tabs and change the category
			 * selection.
			 */
			if ($(this).hasClass('emoji-menu-tab')) {
				if (self.getTabIndex(this) !== self.currentCategory) {
					self.selectCategory(self.getTabIndex(this));
				}
				return false;
			}

			/* ! MODIFICATION END */
			var emoji = $('.label', $(this)).text();
			window.setTimeout(function() {
				self.onItemSelected(emoji);
				alert(emoji);
				/*
				 * ! MODIFICATION START Following code was modified by Igor
				 * Zhukov, in order to close only on ctrl-, alt- emoji select
				 */
				if (e.ctrlKey || e.metaKey) {
					self.hide();
				}
				/* ! MODIFICATION END */
			}, 0);
			e.stopPropagation();
			return false;
		});

3.emoji.css,55行。

将icon的 position: relative; 去掉。

代码语言:javascript
复制
.emoji-picker-icon {
right: 10px;
top: 5px;
font-size: 20px;
opacity: 0.7;
z-index: 100;
transition: none;
color: black;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015/12/09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果图镇楼
  • 源下载地址
  • 插件修改
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档