@menciones

Escribe @ y unas letras para elegir una persona de una lista. El editor inserta a la persona como un pequeño chip no editable que contiene su id, para que tu servidor pueda identificar a quién se mencionó. La lista puede ser un arreglo estático o una función que consulte a tu servidor.

Cómo activarlo

Esta función la ofrece el plugin mentionplugin.js (también incluido en plugins/all_plugins.js). No hay botón en la barra de herramientas: el selector se abre cuando el usuario escribe el carácter de activación. El carácter @ solo se registra cuando proporcionas al editor una lista o una fuente de datos, así que cargar el plugin por sí solo no hace nada.

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

<div id="editor"><p>Thanks for the review.</p></div>
<script>
var editor = new RichTextEditor("#editor", {
    mentionStaticList: [
        { id: "u1", label: "Ana Ruiz", subtitle: "ana@example.com" },
        { id: "u2", label: "Ben Okafor", subtitle: "ben@example.com" },
        { id: "u3", label: "Bea Lindqvist", subtitle: "bea@example.com" },
        { id: "u4", label: "Chen Wei", subtitle: "chen@example.com" }
    ]
});
</script>

Cada elemento necesita un id y un label. subtitle y avatarUrl son opcionales; sin avatar, el selector muestra las iniciales de la persona. También funcionan los elementos con la forma { id, name, email } : name se usa como etiqueta y email como subtítulo.

Consultar a tu servidor

Para un directorio real de usuarios, pasa mentionSource en su lugar. Recibe el texto escrito después del carácter de activación y devuelve un arreglo o una Promise de un arreglo. Mientras se ejecuta, el selector muestra "Searching…"; un resultado vacío muestra "No matches".

var people = [{ id: 7, name: "Ana Ruiz", email: "ana@example.com" }, { id: 9, name: "Ben Okafor", email: "ben@example.com" }];
var editor = new RichTextEditor("#editor", {
    mentionSource: function (query, ctx) {
        // ctx.trigger is "@"; replace this with a fetch to your own endpoint
        return new Promise(function (resolve) {
            setTimeout(function () {
                resolve(people.filter(function (p) { return p.name.toLowerCase().indexOf(query.toLowerCase()) >= 0; }));
            }, 100);
        });
    }
});

La primera llamada, justo después del carácter de activación, tiene una consulta vacía y se ejecuta de inmediato. Las llamadas posteriores esperan mentionDebounceMs desde la última tecla. Las respuestas que llegan después de una consulta más reciente se descartan.

Opciones

Opción	Valor predeterminado	Función
`mentionStaticList`	`null`	Arreglo de personas. Se filtra mediante una coincidencia sin distinción de mayúsculas en la etiqueta, el subtítulo y el id. Con una consulta vacía se ofrecen las primeras 50.
`mentionSource`	`null`	`function (query, ctx)` que devuelve un arreglo o una Promise. Se usa en lugar de la lista estática si se configuran ambos.
`mentionTrigger`	`"@"`	El carácter que abre el selector.
`mentionMaxItems`	`8`	Número máximo de elementos mostrados a la vez.
`mentionDebounceMs`	`150`	Espera después de escribir antes de volver a llamar a la fuente.
`mentionInsertClass`	`"rte-mention"`	Clase aplicada al chip insertado.
`mentionTriggers`	`null`	Arreglo de definiciones adicionales de activación (con la misma forma que `register` más abajo), registradas al iniciar.
`mentionEnabled`	`true`	`false` desactiva el plugin; `editor.mentions` no se crea en ese caso.

Más caracteres de activación y la API

editor.mentions.register() añade un carácter de activación, por ejemplo # para etiquetas. Proporciona source(query, ctx) como arriba, o search(query, done) y llama a done(list).

editor.mentions.register({
    trigger: "#",
    search: function (query, done) { done([{ id: "t-12", label: "release-2.6" }, { id: "t-13", label: "billing" }]); },
    insertClass: "tag-chip"
});

Una definición también puede tener renderItem(item) (devuelve texto o un nodo para la fila de la lista), renderInsert(item) (devuelve el texto del chip o un nodo) y label (el nombre accesible de la lista). Los otros métodos son editor.mentions.remove(trigger), list(), close() y isOpen().

Teclas mientras el selector está abierto: ArrowUp y ArrowDown desplazan la selección, Enter o Tab insertan y Escape cierra. Escribir un espacio también lo cierra. El selector solo se abre al principio de una línea o después de un espacio, por lo que una dirección de correo como mail@example.com no lo abre, y nunca se abre dentro de <code>, <pre> ni de un chip existente.

Aspectos a tener en cuenta

Este es el HTML que se guarda. Después del chip hay un espacio de no separación para que el cursor tenga dónde colocarse:
```
<p>Thanks for the review. <span class="rte-mention" contenteditable="false" data-rte-mention-id="u1" data-rte-mention-trigger="@">@Ana Ruiz</span>&nbsp;and ...</p>
```
Lee data-rte-mention-id en el servidor para enviar notificaciones. Si sanitizas el HTML, permite span con class, contenteditable y los dos atributos data-rte-mention-* .
El estilo de cápsula del chip se añade solo dentro del editor. La página que muestra el HTML guardado necesita su propio CSS para .rte-mention, y un insertClass personalizado no recibe ningún estilo.
El carácter de activación se compara con la tecla que ha pulsado el usuario, por lo que debe ser un solo carácter.
Los textos del selector proceden de las claves de idioma text_mn_searching y text_mn_nomatches.

Relacionado: demo de @menciones, referencia de configuración.