功能 features

  • 不須引用其他 Framework/Library。
    No need to reference other Framework/Library.
  • 簡易的產生表情功能。
    Easy to generate emoji.
  • 支持將表情代碼轉圖片, 表情圖片轉代碼。
    Support for specifying the code format of emoji.

示例 demo

完整功能
          
              <body>
                <div id="emoji"></div>
              </body>

              const option = {
                editor: 'editArea',   //editable div id
                btn: 'btn',           //button id
                icon: [{
                  path: 'dist/img/tieba',
                  alias: {
                    1: "hehe",
                    2: "haha",
                    3: "tushe",
                    4: "a",
                    5: "ku",
                    6: "lu",
                    7: "kaixin",
                    8: "han",
                    9: "lei",
                    10: "heixian",
                    11: "bishi",
                    12: "bugaoxing",
                    13: "zhenbang",
                    14: "qian",
                    15: "yiwen",
                    16: "yinxian",
                    17: "tu",
                    18: "yi",
                    19: "weiqu",
                    20: "huaxin",
                    21: "hu",
                    22: "xiaonian",
                    23: "neng",
                    24: "taikaixin",
                    25: "huaji",
                    26: "mianqiang",
                    27: "kuanghan",
                    28: "guai",
                    29: "shuijiao",
                    30: "jinku",
                    31: "shengqi",
                    32: "jinya",
                    33: "pen",
                    34: "aixin",
                    35: "xinsui",
                    36: "meigui",
                    37: "liwu",
                    38: "caihong",
                    39: "xxyl",
                    40: "taiyang",
                    41: "qianbi",
                    42: "dnegpao",
                    43: "chabei",
                    44: "dangao",
                    45: "yinyue",
                    46: "haha2",
                    47: "shenli",
                    48: "damuzhi",
                    49: "ruo",
                    50: "OK"
                  }
                }]
              }
          
              var _emoji = new emoji(option)
          
              function emojiChange() {
                _emoji.emojiChange()
              }
          
              function emojiParse() {
                const editArea = document.querySelectorAll('#editArea')
                _emoji.emojiParse(editArea)
              }
文本轉換 text parse
Today :taiyang: is a beautiful day :aixin: 
            
                <body>
                  <div id="emoji"></div>
                </body>
                
                const _option = {
                  icon: [{
                    path: 'dist/img/tieba',
                    alias: {
                      1: "hehe",
                      2: "haha",
                      3: "tushe",
                      4: "a",
                      5: "ku",
                      6: "lu",
                      7: "kaixin",
                      8: "han",
                      9: "lei",
                      10: "heixian",
                      11: "bishi",
                      12: "bugaoxing",
                      13: "zhenbang",
                      14: "qian",
                      15: "yiwen",
                      16: "yinxian",
                      17: "tu",
                      18: "yi",
                      19: "weiqu",
                      20: "huaxin",
                      21: "hu",
                      22: "xiaonian",
                      23: "neng",
                      24: "taikaixin",
                      25: "huaji",
                      26: "mianqiang",
                      27: "kuanghan",
                      28: "guai",
                      29: "shuijiao",
                      30: "jinku",
                      31: "shengqi",
                      32: "jinya",
                      33: "pen",
                      34: "aixin",
                      35: "xinsui",
                      36: "meigui",
                      37: "liwu",
                      38: "caihong",
                      39: "xxyl",
                      40: "taiyang",
                      41: "qianbi",
                      42: "dnegpao",
                      43: "chabei",
                      44: "dangao",
                      45: "yinyue",
                      46: "haha2",
                      47: "shenli",
                      48: "damuzhi",
                      49: "ruo",
                      50: "OK"
                    }
                  }]
                }
            
                var _emoji_ = new emoji(_option)
            
                function editAreaParse() {
                  _emoji_.emojiParse(document.querySelectorAll('#editAreaParse'))
                }

使用 usage

安装 install

$ npm install lan-emoji

引用 reference

直接引用css文件和js文件 並將圖片放置資料夾裡 

          
  <head>
    <link rel="stylesheet" href="css/lan.emoji.css"/>
  </head>
  <body>
    <script src="js/lan.emoji.js"></script>

    <div id="emoji"></div>
  </body>

方法 method

切換顯示隱藏表情面板。 show or hide emoji panel.

_emoji.toggle()