絵文字のオートコンプリート
チャットアプリのように絵文字を入力できます。:smile: は、閉じるコロンを入力するとすぐに 😄 に変わります。コロンに続けて数文字入力すると、一致する絵文字の候補がカーソルの下に表示されます。ボタンはなく、キーボードで操作します。
:ta を入力した状態です。入力文字で始まる名前が先に、その文字を含む名前が後に並びます。Enter を押すと 🎉 が挿入されました。有効にする
この機能は emojiautocomplete.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。既定で有効なため、読み込むだけで使えます。ツールバー項目は不要です。
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/emojiautocomplete.js"></script>
<div id="div_editor1"><p>Great work on the release </p></div>
<script>
var editor1 = new RichTextEditor("#div_editor1", {
toolbar: "custom",
toolbar_custom: "{bold,italic,underline}|{insertemoji}|{undo,redo}"
});
</script>all_plugins.js に含まれているため、all_plugins.js を読み込むすべてのページで絵文字のオートコンプリートが有効になります。無効にするには emojiAutocompleteEnabled: false を設定します。
オプション
| オプション | 既定値 | 動作 |
|---|---|---|
emojiAutocompleteEnabled | true | 変換と候補一覧の両方を有効または無効にします。 |
emojiShortcodes | 286 個の名前を持つ組み込みのマップ（smile、+1、tada、rocket、heart など） | プラグインが認識する名前を { name: "emoji" } の形式で指定します。設定すると組み込みのマップを置き換えます。 |
text_emoji_suggest | "Emoji suggestions" | 候補一覧のアクセシブルな名前です。 |
組み込みの名前を残して独自の名前を追加するには、先に既定のマップをコピーします。
var editor1 = new RichTextEditor("#div_editor1", {
emojiShortcodes: Object.assign({}, RTE_DefaultConfig.emojiShortcodes, { shipit: "\u{1F6A2}", lgtm: "\u{1F44D}" })
});このエディターでは、:shipit: は 🚢 に変わり、:smile: は引き続き 😄 に変わり、:lg の候補には :lgtm: が表示されました。emojiShortcodes: { shipit: "\u{1F6A2}" } だけを設定した場合は、:smile: は入力したまま残りました。
使い方
- 完全なコード。
:name:を入力します。閉じるコロンを入力した時点で、マップに名前があれば絵文字に置き換えます。:nosuchcode:のような未知の名前はテキストのまま残ります。 - 候補一覧。
:に続けて、英字、数字、_、+、-のいずれかを 1 文字以上入力します。最大 8 件を表示し、同じ絵文字は最初に一致する名前で 1 回だけ表示します。ArrowDown と ArrowUp で移動し、Enter または Tab で挿入し、Escape で閉じます。クリックでも挿入できます。 - 元に戻す。変換直後に Ctrl+Z（Mac では Cmd+Z）を押すと、入力したコードに戻ります。
:rocket:→ 🚀 →:rocket:。先にほかのキーを押すと、Ctrl+Z はエディターの通常の元に戻す操作になります。 - コロンは単語の先頭に置く必要があります。つまり、空白、句読点、またはテキストの先頭の直後である必要があります。
release:taでは何も起きず、release :taでは一覧が開きます。これにより、10:30のような時刻や URL は変更されません。 <code>または<pre>の中では変換しません。
注意点
- 結果は本文中の絵文字そのものです。それ以外は追加しません。
:taと Enter、続けてand :rocket:を入力した結果は次のとおりです。<p>Great work on the release 🎉 and 🚀</p> - 名前は小文字で照合します。組み込みのマップは GitHub 形式の名前を使い、
+1とthumbsupはどちらも 👍 です。 - 候補一覧は、エディターの外側にあるページの body に
rte-emoji-popクラスで追加し、rte_theme_default.cssでスタイルを設定します。エディターのダークモード（rte-dark、またはシステムがダーク設定の場合のrte-auto-dark）に従います。 - このプラグインは、絵文字ピッカーなしで単独で動作します。ピッカーは一覧から探す用途、オートコンプリートは名前を知っている場合の用途に向いています。