note.sorakakeru.info

素のJavaScriptでEmojiMartを使う

EmojiMartを素のJavaScriptで利用したので、実装メモ。
実装の仕様は以下。

  • ボタンを押下して絵文字ピッカーを表示・非表示（表示・非表示の切り替えはshowclassを付与してCSSで行う）
  • 選んだ絵文字はフォームのテキスト入力欄に挿入する
<!-- jsはhead内で読み込み -->
<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
<script src="./script.js" defer></script>


<form>
  <button type="button" name="btn_emoji">picker表示</button>
  <input type="text" name="emoji" id="emoji">
  <div class="picker_area"></div>
</form>
script.js
document.addEventListener('DOMContentLoaded', () => {
  emojiPicker();
});


const emojiPicker = () => {
  const btnEmoji = document.querySelector('button');
  const textForm = document.querySelector('input');
  const pickerArea = document.querySelector('.picker_area');


  btnEmoji.addEventListener('click', () => {
    pickerArea.classList.toggle('show');


    const pickerOptions = {
      onEmojiSelect: emoji => textForm.value = JSON.stringify(emoji.native).replaceAll('"', ''),
      locale: 'ja',
      theme: 'light',
    }
    const picker = new EmojiMart.Picker(pickerOptions);
    pickerArea.appendChild(picker);
  })


}

EmojiMartはオブジェクトで返却されるので、onEmojiSelect: emoji => JSON.stringify(emoji)としてJSON文字列に変換する。
今回は絵文字のみ挿入したいので、nativeと指定している。ただしこのままだとダブルクオーテーションも挿入されてしまうため、replaceAllで置換している。