絵文字ピッカー

ツールバーボタンで、8 カテゴリ、1,037 個の絵文字を検索できる一覧を開きます。クリックまたはキーボードで選ぶと、通常の Unicode 文字としてカーソル位置に挿入します。

有効にする

この機能は insertemoji.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。ツールバー項目は insertemoji（ツールチップは「Insert Emoji」）です。default、basic、full、mobile のツールバーにはすでに含まれているため、プラグインを読み込むだけで使えます。独自のツールバーでは、必要な位置に insertemoji を追加します。

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/insertemoji.js"></script>

<div id="div_editor1"><p>Thanks for the update. Ship it on Friday </p></div>
<script>
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertemoji}|{undo,redo}"
});
</script>

プラグインがなければ、ボタンは何もしません。カスタムツールバーは、ブラウザーの幅が maxWidthForMobile（992 px）以上の場合にのみ使います。それより狭い場合は、絵文字ボタンを既定で含む toolbarMobile を表示します。

オプション

ピッカーには動作を切り替える設定はありません。設定できるのは、表示する文言と言語です。

オプション	既定値	動作
`text_insertemoji`	`"Insert Emoji"`	ツールバーボタンのツールチップです。
`text_searchemojis`	`"Search"`	検索ボックスのプレースホルダーです。
`text_emoji_smileys` … `text_emoji_symbols`, `text_emoji_recent`	英語のカテゴリ名（「Smileys」「Recently used」など）	カテゴリの見出しとタブのツールチップです。8 つのカテゴリは、顔、人物、動物、食べ物、旅行、活動、物、記号です。
`text_emoji_items`	`"{0} items"`	検索結果の上に表示する件数です。
`text_uilocale`	未設定（言語パックで設定します）	`de es fr it ja ko nl pt pt-pt ru zh-Hans zh-Hant` の場合、初めて開くときに `lang/emoji/rte-emoji-<locale>.js` を読み込み、その言語で絵文字名を表示、検索します。英語名でも検索できます。
`url_base`	`"/richtexteditor"`	上記の絵文字名ファイルを読み込むフォルダーです。

これらはすべて言語パックが設定します。lang/rte-lang-de.js を読み込むと、検索ボックスは「Suche」、タブは「Personen」「Tiere」などになり、「rakete」で 🚀 が見つかります。

使い方

検索。ピッカーを開くと検索ボックスにフォーカスが移ります。入力すると、すべてのカテゴリを名前で同時に絞り込み（「rocket」で 🚀 が見つかります）、一致件数を表示します。
カテゴリ。タブの列でカテゴリを切り替えます。開いているカテゴリのみを描画するため、パネルはすぐに開きます。
最近使った絵文字。ピッカーから挿入した直近 16 個の絵文字を、localStorage のキー rte-emoji-recent に保存します。履歴がある場合は、そのタブで開きます。ストレージがブロックされている場合、一覧は現在のページでのみ保持されます。
キーボード。Tab で検索ボックスから一覧に移動します。矢印キーで絵文字間を移動し、上下キーでは上下の行の最も近い絵文字に移動します。Home と End で先頭と末尾に移動し、Enter または Space で挿入し、Escape で閉じます。
スクリプト。editor1.execCommand("insertemoji") で同じピッカーを開きます。スラッシュメニューでは「Emoji」と表示されます。

注意点

絵文字はラッパー要素を付けず、文字そのものとして保存します。🚀 を選ぶと、コンテンツは次のようになります。
```
<p>Thanks for the update. Ship it on Friday🚀 </p>
```
HTML は UTF-8 で保存してください。データベースでは、MySQL の utf8mb4 など、4 バイト文字を格納できる列の型を使います。
絵文字の外観は閲覧者の OS のフォントによって決まります。同じ文字でも Windows、macOS、Android で異なる外観になる場合があります。
一覧はプラグイン内で固定されています。ピッカーの絵文字を追加、削除するオプションはありません。
ピッカーを開かずに :shortcode: と入力して絵文字を挿入する方法は、絵文字のオートコンプリートを参照してください。

関連情報：ツールバー項目のリファレンス、モバイルツールバー、特殊文字のデモ。