Chips inteligentes

Pequeñas etiquetas redondeadas para una fecha, una persona o un enlace, colocadas en línea con el texto. Cada chip es una sola pieza que no puede editarse letra por letra y guarda un valor legible por máquina junto al texto que ven las personas, como 2026-11-11 detrás de "Nov 11, 2026" o un ID de usuario detrás de un nombre.

Cómo activarlo

Esta función la ofrece el plugin smartchips.js (también incluido en plugins/all_plugins.js). Añade dos comandos:

• insertdatechip (texto de ayuda "Date Chip"): un selector de fechas. La barra predeterminada lo incluye en el menú "More" (⋮).
• insertchip (texto de ayuda "Smart Chip"): un cuadro de diálogo con las pestañas Date, Person y Link. No está en ninguna barra integrada; añádelo a la tuya o usa "Smart chip" en el menú de comandos con barra.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/smartchips.js"></script>

<div id="div_editor1"><p>Review with </p></div>
<script>
var people = [
  { label: "Maria Garcia", value: "user:1042" },
  { label: "Mark Chen", value: "user:2077" },
  { label: "Priya Nair", value: "user:3310" }
];
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertdatechip,insertchip}|{undo,redo}",
  chipResolver: function (query, type) {
    if (type !== "person") return Promise.resolve([]);
    var q = query.toLowerCase();
    return Promise.resolve(people.filter(function (p) { return p.label.toLowerCase().indexOf(q) !== -1; }));
  }
});
</script>

En una aplicación real, el resolver consultaría tu directorio de usuarios y devolvería las coincidencias.

Opciones

Opción	Valor predeterminado	Función
chipResolver	null	function (query, type), donde type es "person" o "link". Devuelve una Promise de [{ label, value, href }]; se muestran hasta seis como sugerencias mientras el autor escribe. label es el texto del chip, value se almacena en data-rte-chip-value, href es la dirección del enlace para los chips de enlace.
chipDateFormat	null	function (date) que devuelve el texto de un chip de fecha. Sin ella, el texto es "Nov 11, 2026" en una página en inglés; con un paquete de idioma distinto del inglés (text_uilocale) se usa la fecha corta de esa configuración regional obtenida de Intl.DateTimeFormat.
text_insertdatechip, text_insertchip	"Date Chip", "Smart Chip"	Textos de ayuda de los botones.

var editor1 = new RichTextEditor("#div_editor1", {
  chipDateFormat: function (d) {
    return d.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
  }
});

Con esto, el botón Today mostró "4 November 2026" e insertó un chip con ese texto; el valor almacenado siguió siendo 2026-11-04.

Cómo usarlo

• Chip de fecha. El cuadro Date ofrece Today, Tomorrow, Yesterday y Next week, cada uno con su fecha, y un campo de fecha para cualquier otro día. El valor siempre es YYYY-MM-DD en la hora local del navegador.
• Chip de persona. Escribe un nombre y pulsa Insert, o haz clic en una sugerencia. Sin un resolver, el nombre escrito es tanto la etiqueta como el valor.
• Chip de enlace. Escribe una dirección. A un dominio sin protocolo se le añade https://; javascript:, data:, vbscript: y file: se rechazan y el campo solicita una URL http(s) válida. El chip muestra la dirección sin https:// y la abre en una pestaña nueva.
• Desde un script: editor1.execCommand("insertdatechip") y editor1.execCommand("insertchip") abren los cuadros de diálogo.

Aspectos a tener en cuenta

• El plugin solo tiene estos tres tipos de chip. No hay chips de archivo ni de lugar, y el campo icon que puede devolver un resolver no se usa.
• Un chip queda fijo una vez insertado. Hacer clic en un chip de fecha no abre un selector y nada actualiza después el texto (un chip "Today" conserva la fecha en que se creó). Para cambiar uno, elimínalo e inserta otro.
• Marcado guardado, correspondiente a la imagen anterior (iconos abreviados):

  <span class="rte-chip rte-chip-person" data-rte-chip="person" data-rte-chip-value="user:1042" contenteditable="false" style=""><span class="rte-chip-icon"><svg …>…</svg></span><span class="rte-chip-label">Maria Garcia</span></span>​
  <span class="rte-chip rte-chip-date" data-rte-chip="date" data-rte-chip-value="2026-11-11" contenteditable="false" style="">…<span class="rte-chip-label">Nov 11, 2026</span></span>​
  <a class="rte-chip rte-chip-link" data-rte-chip="link" data-rte-chip-value="https://richtexteditor.com/docs/quick-start" contenteditable="false" href="https://richtexteditor.com/docs/quick-start" target="_blank" rel="noopener noreferrer" style="">…<span class="rte-chip-label">richtexteditor.com/docs/quick-start</span></a>​

  Después de cada chip hay un espacio de ancho cero para poder colocar el cursor tras él. Lee data-rte-chip y data-rte-chip-value en tu servidor para saber a quién se nombró o qué fecha se estableció.
• Los colores de los chips proceden de una hoja de estilos que el plugin añade solo dentro del editor. Añade reglas para .rte-chip, .rte-chip-date, .rte-chip-person y .rte-chip-link a la página que muestra el contenido.
• Los sanitizadores deben conservar span y a con class y los atributos data-rte-chip* , además de los pequeños iconos svg en línea (o elimina el span rte-chip-icon ).
• Para las @menciones mientras escribes, consulta menciones.

Relacionado: demo de bloques enriquecidos, tarjetas de enlaces.