Emoji-Autovervollständigung

Geben Sie Emojis ein, wie es Chat-Apps tun::smile:wird zu 😄, sobald der schließende Doppelpunkt eingegeben wird, und ein Doppelpunkt gefolgt von einigen Buchstaben öffnet eine kurze Liste passender Emojis unter dem Caret. Es gibt keinen Knopf; es funktioniert über die Tastatur.

Schalten Sie es ein

Die Funktion ist dieemojiautocomplete.jsPlugin (auch inplugins/all_plugins.js). Es reicht aus, es zu laden: Es ist standardmäßig aktiviert und benötigt kein Symbolleistenelement.

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

Weilall_plugins.jsschließt es ein, jede Seite, die geladen wirdall_plugins.jshat die automatische Vervollständigung von Emojis aktiviert. SatzemojiAutocompleteEnabled: falseum es auszuschalten.

Optionen

Option	Standard	Was es bewirkt
emojiAutocompleteEnabled	true	Schaltet sowohl die Konvertierung als auch die Liste ein oder aus.
emojiShortcodes	Eine integrierte Karte mit 286 Namen (smile, +1, tada, rocket, heart …)	Die Namen, die das Plugin kennt, z{ name: "emoji" }. Einstellenersetztdie integrierte Karte.
text_emoji_suggest	"Emoji suggestions"	Zugänglicher Name der Liste.

Um die integrierten Namen beizubehalten und eigene hinzuzufügen, kopieren Sie zuerst die Standardkarte:

var editor1 = new RichTextEditor("#div_editor1", {
  emojiShortcodes: Object.assign({}, RTE_DefaultConfig.emojiShortcodes, { shipit: "\u{1F6A2}", lgtm: "\u{1F44D}" })
});

Mit diesem Editor,:shipit:gab 🚢,:smile:gab trotzdem 😄, und:lgaufgeführt:lgtm:. MitemojiShortcodes: { shipit: "\u{1F6A2}" }allein,:smile:blieb wie eingegeben.

Benutze es

• Vollständiger Code. Geben Sie :name: ein. Wenn der schließende Doppelpunkt eingegeben wird und der Name in der Karte steht, wird der Code durch das Emoji ersetzt. Unbekannte Namen wie :nosuchcode: bleiben als Text übrig.
• Die Liste. Geben Sie : und mindestens einen Buchstaben, eine Ziffer, _, + oder - ein. Es werden bis zu acht Übereinstimmungen angezeigt. Jedes Emoji wird einmal unter seinem ersten passenden Namen angezeigt. Pfeil nach unten und Pfeil nach oben bewegen sich, Enter oder Tab fügt ein, Escape schließt die Liste und ein Klick fügt ein.
• Rückgängig machen Strg+Z (Befehl+Z auf einem Mac) direkt nach einer Konvertierung setzt den eingegebenen Code zurück: :rocket: → 🚀 → :rocket:. Jede andere Taste macht Strg+Z zunächst zum normalen Rückgängigmachen des Editors.
• Der Doppelpunkt muss ein Wort beginnen: Er muss auf ein Leerzeichen, ein Satzzeichen oder den Anfang des Textes folgen. release:ta bewirkt nichts; release :ta öffnet die Liste. Dadurch bleiben Zeiten wie 10:30 und URLs allein.
• In <code> oder <pre> wird nichts konvertiert.

Wissenswertes

• Das Ergebnis ist das Emoji-Zeichen im Text, sonst nichts. Nachdem Sie :ta und die Eingabetaste eingegeben haben, dann and :rocket::

  <p>Great work on the release 🎉 and 🚀</p>

• Namen werden in Kleinbuchstaben abgeglichen. Die integrierte Karte enthält Namen im GitHub-Stil; +1 und thumbsup sind beide 👍.
• Die Liste wird dem Seitenhauptteil (außerhalb des Editors) mit der Klasse rte-emoji-pop hinzugefügt, gestaltet durch rte_theme_default.css. Es folgt dem Dunkelmodus des Editors (rte-dark oder rte-auto-dark unter einer dunklen Systemeinstellung).
• Das Plugin funktioniert eigenständig, ohne die Emoji-Auswahl. Der Picker dient zum Durchsuchen; Die automatische Vervollständigung ist für Personen gedacht, die den Namen kennen.

Verwandt: Emoji-Auswahl, Konfiguration.