Seletor de emoji

Um botão na barra de ferramentas que abre uma grade pesquisável com 1,037 emojis em oito categorias. Clique em um, ou escolha-o pelo teclado, e ele é inserido na posição do cursor como um caractere Unicode simples.

Ative o recurso

O recurso é o plugin insertemoji.js (também incluído em plugins/all_plugins.js). O item da barra de ferramentas é insertemoji (dica de ferramenta "Insert Emoji"). Ele já está nas barras de ferramentas default, basic, full e mobile, então nelas basta carregar o plugin. Na sua própria barra de ferramentas, adicione insertemoji onde quiser:

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

Sem o plugin, o botão não faz nada. Uma barra de ferramentas personalizada só é usada quando a janela do navegador tem pelo menos maxWidthForMobile (992 px) de largura; abaixo disso, o editor mostra toolbarMobile, que traz o botão de emoji por padrão.

Opções

O seletor não tem chaves de comportamento. O que você pode definir são os textos e o idioma dele:

Opção	Padrão	O que faz
text_insertemoji	"Insert Emoji"	Dica de ferramenta do botão da barra de ferramentas.
text_searchemojis	"Search"	Placeholder da caixa de busca.
text_emoji_smileys … text_emoji_symbols, text_emoji_recent	O nome da categoria em inglês ("Smileys", "Recently used" …)	Títulos das categorias e dicas de ferramenta das abas. As oito categorias são smileys, people, animals, food, travel, activities, objects, symbols.
text_emoji_items	"{0} items"	A contagem de resultados exibida acima dos resultados da busca.
text_uilocale	não definido (definido por um pacote de idioma)	Para de es fr it ja ko nl pt pt-pt ru zh-Hans zh-Hant, o seletor carrega lang/emoji/rte-emoji-<locale>.js na primeira vez que abre, e mostra e pesquisa os nomes dos emojis nesse idioma. Os nomes em inglês continuam funcionando na busca.
url_base	"/richtexteditor"	Pasta de onde o arquivo de nomes de emoji acima é carregado.

Os pacotes de idioma definem tudo isso para você. Com o lang/rte-lang-de.js carregado, a caixa de busca mostra "Suche", as abas mostram "Personen", "Tiere" e assim por diante, e buscar "rakete" encontra 🚀.

Como usar

• Busca. A caixa de busca recebe o foco quando o seletor abre. Digitar filtra todas as categorias de uma vez pelo nome ("rocket" encontra 🚀) e mostra a contagem de correspondências.
• Categorias. A linha de abas troca de categoria. Só a categoria aberta é desenhada, então o painel abre rápido.
• Usados recentemente. Os últimos 16 emojis inseridos pelo seletor são armazenados no localStorage com a chave rte-emoji-recent. Quando há algum, o seletor abre nessa aba. Se o armazenamento estiver bloqueado, a lista dura apenas enquanto a página estiver aberta.
• Teclado. Tab vai da caixa de busca para a grade. As setas movem entre os emojis (para cima e para baixo vão para o emoji mais próximo na linha de cima ou de baixo), Home e End pulam para o primeiro e o último, Enter ou Espaço insere, Escape fecha o seletor.
• Por script. editor1.execCommand("insertemoji") abre o mesmo seletor. O menu de barra o lista como "Emoji".

O que você precisa saber

• O emoji é salvo como o próprio caractere, sem nenhum elemento em volta. Depois de escolher 🚀, o conteúdo fica assim:

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

  Armazene o HTML em UTF-8 (em um banco de dados, use um tipo de coluna que comporte caracteres de quatro bytes, como utf8mb4 no MySQL).
• A aparência de um emoji depende da fonte do sistema operacional do leitor. O mesmo caractere pode ter aparência diferente no Windows, no macOS e no Android.
• A lista é fixa no plugin. Não há opção para adicionar ou remover emojis do seletor.
• Para digitar emojis como :shortcode: sem abrir o seletor, consulte preenchimento automático de emoji.

Relacionados: referência de itens da barra de ferramentas, barra de ferramentas para mobile, demonstração de caracteres especiais.