Selector de emojis

Un botón de la barra de herramientas que abre una cuadrícula con búsqueda y 1,037 emojis en ocho categorías. Haz clic en uno o selecciónalo con el teclado para insertarlo en la posición del cursor como un carácter Unicode normal.

Cómo activarlo

Esta función la ofrece el plugin insertemoji.js (también incluido en plugins/all_plugins.js). El elemento de la barra de herramientas es insertemoji (texto de ayuda "Insert Emoji"). Ya está en las barras default, basic, full y mobile , así que basta con cargar el plugin para ellas. En tu propia barra, añade insertemoji donde quieras:

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

Sin el plugin, el botón no hace nada. Una barra personalizada solo se usa cuando la ventana del navegador tiene al menos maxWidthForMobile (992 px) de ancho; por debajo, el editor muestra toolbarMobile, que incluye el botón de emojis de forma predeterminada.

Opciones

El selector no tiene opciones para modificar su comportamiento. Puedes configurar sus textos y su idioma:

Opción	Valor predeterminado	Función
text_insertemoji	"Insert Emoji"	Texto de ayuda del botón de la barra de herramientas.
text_searchemojis	"Search"	Marcador de posición del cuadro de búsqueda.
text_emoji_smileys … text_emoji_symbols, text_emoji_recent	El nombre de la categoría en inglés ("Smileys", "Recently used"…)	Encabezados de las categorías y textos de ayuda de las pestañas. Las ocho categorías son caras, personas, animales, comida, viajes, actividades, objetos y símbolos.
text_emoji_items	"{0} items"	El número de resultados que aparece sobre los resultados de búsqueda.
text_uilocale	sin definir (lo establece un paquete de idioma)	Para de es fr it ja ko nl pt pt-pt ru zh-Hans zh-Hant, el selector carga lang/emoji/rte-emoji-<locale>.js la primera vez que se abre, y muestra y busca los nombres de los emojis en ese idioma. Los nombres en inglés también coinciden.
url_base	"/richtexteditor"	Carpeta desde la que se carga el archivo de nombres de emojis anterior.

Los paquetes de idioma configuran todo esto por ti. Al cargar lang/rte-lang-de.js , el cuadro de búsqueda muestra "Suche", las pestañas muestran "Personen", "Tiere", etc., y al buscar "rakete" se encuentra 🚀.

Cómo usarlo

• Búsqueda. El cuadro de búsqueda recibe el foco al abrir el selector. Al escribir, se filtran todas las categorías a la vez por nombre ("rocket" encuentra 🚀) y se muestra el número de coincidencias.
• Categorías. La fila de pestañas cambia de categoría. Solo se dibuja la categoría abierta, por lo que el panel se abre rápidamente.
• Usados recientemente. Los últimos 16 emojis insertados desde el selector se guardan en localStorage con la clave rte-emoji-recent. Si hay alguno, el selector se abre en esa pestaña. Si el almacenamiento está bloqueado, la lista solo dura mientras permanezca abierta la página actual.
• Teclado. Tab pasa del cuadro de búsqueda a la cuadrícula. Las flechas recorren los emojis (arriba y abajo van al emoji más cercano de la fila anterior o siguiente), Home y End saltan al primero y al último, Enter o Space insertan y Escape cierra el selector.
• Desde un script. editor1.execCommand("insertemoji") abre el mismo selector. El menú de comandos con barra lo muestra como "Emoji".

Aspectos a tener en cuenta

• El emoji se guarda como el propio carácter, sin ningún elemento contenedor. Después de seleccionar 🚀, el contenido es:

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

  Guarda el HTML como UTF-8 (en una base de datos, usa un tipo de columna que admita caracteres de cuatro bytes, como utf8mb4 en MySQL).
• El aspecto de un emoji depende de la fuente del sistema operativo del lector. El mismo carácter puede verse diferente en Windows, macOS y Android.
• La lista es fija dentro del plugin. No hay ninguna opción para añadir o eliminar emojis del selector.
• Para escribir emojis como :shortcode: sin abrir el selector, consulta autocompletado de emojis.

Relacionado: referencia de elementos de la barra de herramientas, barra de herramientas móvil, demo de caracteres especiales.