Emoji-Auswahl

Eine Symbolleistenschaltfläche, die ein durchsuchbares Raster mit 1.037 Emojis in acht Kategorien öffnet. Klicken Sie auf eines oder wählen Sie es mit der Tastatur aus, und es wird am Cursor als einfaches Unicode-Zeichen eingefügt.

Schalten Sie es ein

Die Funktion ist dieinsertemoji.jsPlugin (auch inplugins/all_plugins.js). Das Symbolleistenelement istinsertemoji(Tooltip"Insert Emoji"). Es ist bereits in derdefault, basic, fullUndmobileSymbolleisten, daher reicht es dort aus, das Plugin zu laden. Fügen Sie in Ihrer eigenen Symbolleiste hinzuinsertemojiwo Sie es wollen:

<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>

Ohne das Plugin macht der Button nichts. Eine benutzerdefinierte Symbolleiste wird nur verwendet, wenn das Browserfenster mindestens geöffnet istmaxWidthForMobile(992 px) breit; Darunter zeigt der EditortoolbarMobile, das standardmäßig über die Emoji-Schaltfläche verfügt.

Optionen

Der Picker hat keine Verhaltensschalter. Was Sie einstellen können, sind seine Wörter und seine Sprache:

Option	Standard	Was es bewirkt
text_insertemoji	"Insert Emoji"	Tooltip der Symbolleistenschaltfläche.
text_searchemojis	"Search"	Platzhalter des Suchfelds.
text_emoji_smileys … text_emoji_symbols, text_emoji_recent	Der englische Kategoriename ("Smileys" , "Recently used" …)	Kategorieüberschriften und Tab-Tooltips. Die acht Kategorien sind Smileys, Menschen, Tiere, Essen, Reisen, Aktivitäten, Objekte, Symbole.
text_emoji_items	"{0} items"	Die über den Suchergebnissen angezeigte Ergebnisanzahl.
text_uilocale	nicht festgelegt (von einem Sprachpaket festgelegt)	Für de es fr it ja ko nl pt pt-pt ru zh-Hans zh-Hant lädt der Picker beim ersten Öffnen lang/emoji/rte-emoji-<locale>.js und zeigt Emoji-Namen in dieser Sprache an und durchsucht sie. Englische Namen stimmen immer noch überein.
url_base	"/richtexteditor"	Ordner, aus dem die obige Emoji-Namensdatei geladen wird.

Die Sprachpakete legen all dies für Sie fest. Wenn lang/rte-lang-de.js geladen ist, lautet das Suchfeld "Suche", die Registerkarten lauten "Personen", "Tiere" usw. und die Suche nach "rakete" findet 🚀.

Verwenden

• Suchen. Das Suchfeld hat den Fokus, wenn die Auswahl geöffnet wird. Die Eingabe filtert alle Kategorien gleichzeitig nach Namen ("rocket" findet 🚀) und zeigt die Anzahl der Übereinstimmungen an.
• Kategorien. Die Tabulatorzeile wechselt die Kategorie. Es wird nur die geöffnete Kategorie gezeichnet, sodass sich das Panel schnell öffnet.
• Zuletzt verwendet. Die letzten 16 aus der Auswahl eingefügten Emojis werden in localStorage unter dem Schlüssel rte-emoji-recent gespeichert. Wenn welche vorhanden sind, wird die Auswahl auf dieser Registerkarte geöffnet. Wenn der Speicher gesperrt ist, ist die Liste nur für die aktuelle Seite gültig.
• Tastatur. Die Tabulatortaste bewegt sich vom Suchfeld in das Raster. Mit den Pfeiltasten bewegen Sie sich zwischen Emojis (nach oben und unten gehen Sie zum nächstgelegenen Emoji in der Zeile darüber oder darunter), mit „Pos1“ und „Ende“ springen Sie zum ersten und letzten, mit „Enter“ oder „Leertaste“ wird eingefügt, mit „Escape“ wird die Auswahl geschlossen.
• Aus dem Skript. editor1.execCommand("insertemoji") öffnet denselben Picker. Das Slash-Menü listet es als "Emoji" .
auf

Wissenswertes

• Das Emoji wird als Charakter selbst gespeichert, ohne Wrapper-Element. Nach der Auswahl 🚀 lautet der Inhalt:

  <p>Thanks for the update. Ship it on Friday🚀 </p>

  Speichern Sie den HTML-Code als UTF-8 (in einer Datenbank ein Spaltentyp, der Vier-Byte-Zeichen enthält, z. B. utf8mb4 in MySQL).
• Wie ein Emoji aussieht, hängt von der Schriftart des Betriebssystems des Lesers ab. Derselbe Charakter kann unter Windows, macOS und Android unterschiedlich aussehen.
• Die Liste ist im Plugin festgelegt. Es gibt keine Option zum Hinzufügen oder Entfernen von Emojis zur Auswahl.
• Informationen zum Eingeben von Emojis als :shortcode:, ohne die Auswahl zu öffnen, finden Sie unter Emoji-Autovervollständigung.

Verwandt: Referenz zu Symbolleistenelementen, Mobile Symbolleiste, Sonderzeichen-Demo.