Preenchimento automático de emoji

Digite emojis como nos apps de chat: :smile: vira 😄 assim que os dois-pontos de fechamento são digitados, e dois-pontos seguidos de algumas letras abrem, abaixo do cursor, uma pequena lista de emojis correspondentes. Não há botão; tudo funciona pelo teclado.

Ative o recurso

O recurso é o plugin emojiautocomplete.js (também incluído em plugins/all_plugins.js). Basta carregá-lo: ele vem ativado por padrão e não precisa de item na barra de ferramentas.

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

Como o all_plugins.js o inclui, toda página que carrega o all_plugins.js tem o preenchimento automático de emoji ativado. Defina emojiAutocompleteEnabled: false para desativá-lo.

Opções

Opção	Padrão	O que faz
emojiAutocompleteEnabled	true	Ativa ou desativa tanto a conversão quanto a lista.
emojiShortcodes	Um mapa incluído com 286 nomes (smile, +1, tada, rocket, heart …)	Os nomes que o plugin conhece, como { name: "emoji" }. Definir esta opção substitui o mapa incluído.
text_emoji_suggest	"Emoji suggestions"	Nome acessível da lista.

Para manter os nomes incluídos e adicionar os seus, copie antes o mapa padrão:

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

Com esse editor, :shipit: gerou 🚢, :smile: continuou gerando 😄 e :lg listou :lgtm:. Só com emojiShortcodes: { shipit: "\u{1F6A2}" }, :smile: ficou como foi digitado.

Como usar

• Código completo. Digite :name:. Quando os dois-pontos de fechamento são digitados e o nome está no mapa, o código é substituído pelo emoji. Nomes desconhecidos, como :nosuchcode:, ficam como texto.
• A lista. Digite : e pelo menos uma letra, um dígito, _, + ou -. Aparecem até oito correspondências; cada emoji é mostrado uma vez, com o primeiro nome que corresponde. ArrowDown e ArrowUp movem a seleção, Enter ou Tab insere, Escape fecha a lista, e um clique insere.
• Desfazer. Ctrl+Z (Cmd+Z em um Mac) logo depois de uma conversão devolve o código digitado: :rocket: → 🚀 → :rocket:. Qualquer outra tecla antes faz o Ctrl+Z voltar a ser o desfazer normal do editor.
• Os dois-pontos precisam iniciar uma palavra: precisam vir depois de um espaço, de uma pontuação ou do início do texto. release:ta não faz nada; release :ta abre a lista. Isso evita mexer em horários como 10:30 e em URLs.
• Nada é convertido dentro de <code> ou <pre>.

O que você precisa saber

• O resultado é o caractere do emoji no texto, nada mais. Depois de digitar :ta e Enter, e depois and :rocket::

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

• Os nomes são comparados em minúsculas. O mapa incluído contém nomes no estilo do GitHub; +1 e thumbsup são ambos 👍.
• A lista é adicionada ao body da página (fora do editor) com a classe rte-emoji-pop, estilizada pelo rte_theme_default.css. Ela acompanha o modo escuro do editor (rte-dark, ou rte-auto-dark com o sistema configurado no modo escuro).
• O plugin funciona sozinho, sem o seletor de emoji. O seletor serve para navegar; o preenchimento automático é para quem já sabe o nome.

Relacionados: seletor de emoji, configuração.