Autocompletado de emojis

Escribe emojis como en las aplicaciones de chat: :smile: se convierte en 😄 en cuanto escribes los dos puntos de cierre, y los dos puntos seguidos de unas letras abren una lista breve de emojis coincidentes bajo el cursor. No hay ningún botón; se usa desde el teclado.

Cómo activarlo

Esta función la ofrece el plugin emojiautocomplete.js (también incluido en plugins/all_plugins.js). Basta con cargarlo: está activado de forma predeterminada y no necesita ningún elemento en la barra de herramientas.

<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 all_plugins.js lo incluye, todas las páginas que cargan all_plugins.js tienen activado el autocompletado de emojis. Establece emojiAutocompleteEnabled: false para desactivarlo.

Opciones

Opción	Valor predeterminado	Función
emojiAutocompleteEnabled	true	Activa o desactiva tanto la conversión como la lista.
emojiShortcodes	Un mapa integrado de 286 nombres (smile, +1, tada, rocket, heart …)	Los nombres que reconoce el plugin, como { name: "emoji" }. Al configurarlo, sustituye el mapa integrado.
text_emoji_suggest	"Emoji suggestions"	Nombre accesible de la lista.

Para conservar los nombres integrados y añadir los tuyos, copia primero el mapa predeterminado:

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

Con ese editor, :shipit: produjo 🚢, :smile: siguió produciendo 😄 y :lg mostró :lgtm:. Si solo se configura emojiShortcodes: { shipit: "\u{1F6A2}" } , :smile: se conserva tal como se escribió.

Cómo usarlo

• Código completo. Escribe :name:. Cuando escribes los dos puntos de cierre y el nombre está en el mapa, el código se sustituye por el emoji. Los nombres desconocidos, como :nosuchcode:, se conservan como texto.
• La lista. Escribe : y al menos una letra, un dígito, _, + o -. Aparecen hasta ocho coincidencias; cada emoji se muestra una vez, bajo su primer nombre coincidente. ArrowDown y ArrowUp desplazan la selección, Enter o Tab insertan, Escape cierra la lista y un clic inserta.
• Deshacer. Ctrl+Z (Cmd+Z en Mac) justo después de una conversión recupera el código escrito: :rocket: → 🚀 → :rocket:. Si pulsas antes cualquier otra tecla, Ctrl+Z realiza la acción normal de deshacer del editor.
• Los dos puntos deben iniciar una palabra: deben ir después de un espacio, un signo de puntuación o el inicio del texto. release:ta no hace nada; release :ta abre la lista. Así no se modifican horas como 10:30 ni las URL.
• No se convierte nada dentro de <code> o <pre>.

Aspectos a tener en cuenta

• El resultado es únicamente el carácter del emoji en el texto. Después de escribir :ta y Enter, y luego and :rocket::

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

• Los nombres se comparan en minúsculas. El mapa integrado contiene nombres del estilo de GitHub; +1 y thumbsup corresponden ambos a 👍.
• La lista se añade al cuerpo de la página (fuera del editor) con la clase rte-emoji-popy los estilos de rte_theme_default.css. Sigue el modo oscuro del editor (rte-darko rte-auto-dark cuando el sistema usa un tema oscuro).
• El plugin funciona de forma independiente, sin el selector de emojis. El selector sirve para explorar; el autocompletado es para quienes conocen el nombre.

Relacionado: selector de emojis, configuración.