jQuery-emoji插件的使用

最新推荐文章于 2024-08-20 08:53:50 发布

goodtimedd

最新推荐文章于 2024-08-20 08:53:50 发布

阅读量1.8k

点赞数 4

文章标签： jquery

本文链接：https://blog.csdn.net/goodtimedd/article/details/106950611

版权

下载jQuery-emoji插件

下载地址: http://eshengsky.github.io/jQuery-emoji/.

安装包

npm install --save jQuery-emoji

引入相关的包

// css文件
    <link rel="stylesheet" href="./lib/lib/css/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="./lib/src/css/jquery.emoji.css">


//js文件
<script src="./js/jquery-1.8.2.js"></script>
<script src="./lib/src/js/jquery.emoji.js"></script>
 <script src="./lib/lib/script/jquery.mCustomScrollbar.min.js"></script>

前端简单样式

  <div class="box">
        <div class="text" id="content" contenteditable >
        </div>
        <div class="toolbar">
            <a href="javascript:;" title="表情" class="face">😊</a>
            <a href="javascript:;" title="截屏" class="screen-cut">✂</a>
        </div>
    </div>

在这里contenteditable 给div添加的属性可写如果不添加这个属性，
那么表情将会显示图片对应的字符串

js方法进行调用

$('.face').on('click',function () {
  console.log('123')
  $('#content').emoji({
    //设置触发按钮
    button:'.face',
    showTab: false,
    animation: 'slide',
    position: 'topRight',
    icons: [{
        name: "QQ表情",
        path: "./lib/src/img/qq/",
        maxNum: 91,
        excludeNums: [41, 45, 54],
        file: ".gif"
    }]
  })
  })