Emoji Customize

About 3 min...

You can customize the emoji of the comment box by setting emoji option, you should set it to an array containing preset link or preset config object. If you don't want it, just set it to false.

Presets

Waline provides a series of emoji presets that can be used out of box. You can add them directly to the emoji options:

  • Alus

    https://unpkg.com/@waline/emojis@1.0.1/alus
    
  • Bilibili

    https://unpkg.com/@waline/emojis@1.0.1/bilibili
    
  • QQ

    https://unpkg.com/@waline/emojis@1.0.1/qq
    
  • Tieba

    https://unpkg.com/@waline/emojis@1.0.1/tieba
    
  • Twemoji

    • Emoji:

      https://unpkg.com/@waline/emojis@1.0.1/tw-emoji
      
    Others presets
    • Full: (Not recommand)

      https://unpkg.com/@waline/emojis@1.0.1/tw
      
    • Body:

      https://unpkg.com/@waline/emojis@1.0.1/tw-body
      
    • Food:

      https://unpkg.com/@waline/emojis@1.0.1/tw-food
      
    • Natural:

      https://unpkg.com/@waline/emojis@1.0.1/tw-natural
      
    • Object:

      https://unpkg.com/@waline/emojis@1.0.1/tw-object
      
    • Symbol:

      https://unpkg.com/@waline/emojis@1.0.1/tw-symbol
      
    • People:

      https://unpkg.com/@waline/emojis@1.0.1/tw-people
      
    • Sport:

      https://unpkg.com/@waline/emojis@1.0.1/tw-sport
      
    • Time:

      https://unpkg.com/@waline/emojis@1.0.1/tw-time
      
    • Travel:

      https://unpkg.com/@waline/emojis@1.0.1/tw-travel
      
    • Weather:

      https://unpkg.com/@waline/emojis@1.0.1/tw-weather
      
    • Flag:

      https://unpkg.com/@waline/emojis@1.0.1/tw-flag
      
  • Weibo

    https://unpkg.com/@waline/emojis@1.0.1/weibo
    

Note

Waline DO NOT have any copright of above emojis, use them at your own risk.

Example

Waline.init({
  el: '#waline',
  serverURL: '<YOUR SERVER URL>',

  // Set emoji to Weibo and Bilibili
  emoji: [
    '//unpkg.com/@waline/emojis@1.0.1/weibo',
    '//unpkg.com/@waline/emojis@1.0.1/bilibili',
  ],
});

Creating own preset

Besides presets provided by Waline, you can create one by yourself.

You need to place all emoticons in an accessible server folder, then create info.json in the root directory and set the following options:

  • name: emoji name on the tab

  • prefix (optional): The general prefix of images' filename

    Recommanded

    When you set multiple emojis tabs, we recommend you to add a common prefix to all emoji images in one tab to prevent conflicts with other emoji titles.

  • type (optional): type of the picture, which will be used as file extension

    Tips

    The emojis should be a set of images with same size and same file format. If you DO need to use different types of images, please leave this blank and manually specify the suffix in the next two options.

  • icon: filename of the icon image used in tab (requirement is the same as items)

  • items: Array, each item is the picture filename without common prefix (do not include file extension)

    Tips

    The order of the array is the order in which the emojis are arranged.

Demo

We assume that you have the following files:

https://example.com/myemoji/
├─ my_laugh.png
├─ my_cute.png
├─ my_rage.png
├─ my_sob.png
└─ info.json

Your info.json can be:

{
  "name": "My Emoji",
  "prefix": "my_",
  "type": "png",
  "icon": "cute",
  "items": ["laugh", "sob", "rage", "cute"]
}

Then you can use 'https://example.com/myemoji' as a available preset in emoji option. (ending with / suffix or not is both OK)

Advanced

We recommend you to upload images to a GitHub repo and add a tag after each modification. In this way, you can use the GitHub tag CDN link on cdn.jsdelivr.netopen in new window as your preset, which format is https://cdn.jsdelivr.net/gh/user/repo@version/file. After the tag is bound, original links referenced by the historical comment will still be valid if you edit the images.

Tips

The official presets are using the v1.0.0 version of walinejs/emojiopen in new window.

Using config objects

Besides creating info.json under the image folder to create presets, you can directly add config objects to the emoji option.

The format of the config object is only one place different from info.json: you should add the folder option and set image folder link additionally (DO NOT add trailing /) so that Waline can find your images.

Example

If you have the following files:

https://example.com/myemoji/
├─ my_laugh.png
├─ my_cute.png
├─ my_rage.png
└─ my_sob.png

You can add

{
  name: "My Emoji",
  folder: "https://example.com/myemoji",
  prefix: "my_",
  type: "png",
  icon: "cute",
  items: ["laugh", "sob", "rage", "cute"]
}

to the emoji option as a config item.

Historical issues

Valine support

Note

Waline legacy package still provides Valine's custom emoji options, you can use emojiCDN to set the address prefix of emoji images, and use emojiMaps to set the mapping between emoji title and image.

This compatibility is removed in standard V2 version, so please migrate to the emoji option.

Waline.init({
  el: '#waline',
  serverURL: '<YOUR SERVER URL>',

  // Set CDN here, such as weibo CDN
  emojiCDN: 'https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/',
  // Emoji title and image map
  emojiMaps: {
    smile: 'e3/2018new_weixioa02_org.png',
    lovely: '09/2018new_keai_org.png',
    // ... more emojis
  },
});

Emoji Size Issue

In historical versions, since HTML tags will be escaped, Emoji images completely use Markdown's image syntax, which results of Emoji being rendered by the original <img> tag in historical versions. If you use a high-definition emoticon pack, it may cause display size problems. After @waline/client@0.16.0, the emoji size was successfully repaired.

If you need to adapt the emoji size of the historical version, you can use the CSS selector to do this:

/* You need to replace `https://img.t.sinajs.cn` with your own CDN */
.wl-content img[src^="https://img.t.sinajs.cn"]
{
  width: 1.25em;
  margin: 0.25em;
  vertical-align: middle;
}
TIPS: The comment area is only for demo. If you have any questions, please go to Github Discussion to ask.
Comments
Powered by Waline v2.6.1