Sistema de menciones que imita el

Question

de Facebook

He tenido un problema horrible por el que me he estado atormentando durante los últimos dos días, y todavía tengo que encontrar una solución. Como tal, creo que esto necesita a alguien más inteligente que yo para lograrlo.

Lo que intento crear es un cuadro de texto que simula el de Facebook; esencialmente, la función de etiquetado.

Ahora, si ha usado Facebook, habrá notado que Facebook le permite etiquetar personas en un comentario/publicación, simplemente escribiendo su nombre y seleccionándolo de una lista desplegable. El nombre de la persona que ha seleccionado aparece en texto resaltado en ese mismo área de texto. Logré crear y completar la lista desplegable de manera exitosa con una combinación de JQuery y AJAX, pero el proceso de etiquetado en sí mismo es el stumper.

Una vez que se ha seleccionado un elemento desplegable (mediante Intro o haciendo clic), el texto de la consulta se reemplazará por el nombre etiquetado. Ahora, es difícil ver cómo se puede resaltar el texto en un área de texto, así que descubrí (inspeccionando los elementos en Google Chrome y eliminando el nodo de la zona de texto) que el área de texto en sí es transparente, y hay un blanco div debajo de "simular" el texto. Las palabras resaltadas se colocan en una etiqueta con CSS personalizado, que le da ese fondo azul. Todo esto me he descubierto y he simulado con éxito esto, pero solo puedo hacer una etiqueta.

Ahora investigué más y encontré un elemento de entrada = "oculto", de clase "mentionsHidden". Este elemento de entrada tiene un atributo de valor, que se rellena automáticamente en función del contenido del área de texto. Entonces, si escribí "ABC", el valor del elemento se convierte en "ABC". Si incluí una etiqueta, diga "hola [Rei]!" (donde el nombre en [] es la etiqueta), el valor del elemento se convierte en "hi @ [member_id: Rei]!".

Así que HE HECHO mi tarea. Pero aquí viene la parte que no puedo descifrar.

No puedo encontrar la forma exacta de rellenar dinámicamente el elemento de entrada oculto con el valor del cuadro de texto. Es obvio que el div subyacente que proporciona el fondo de la etiqueta azul se rellena desde el elemento de entrada. Pero el elemento de entrada me está dando dolor de cabeza.

Usted ve, yo no puedo hacer lo siguiente:

-I no puede simplemente "copiar" el valor completo del área de texto actual y "pegar" en el valor del elemento de entrada, porque eso sería anular cualquier persona etiquetada previamente en el elemento de entrada (después de todo, el área de texto solo puede tener texto sin formato).

-Aunque PUEDO localizar el índice actual de la intercalación (la línea negra parpadeante en el área de texto que le indica dónde va a escribir), eso es solo para el área de texto. La posición del índice 10 en el área de texto y en el valor del elemento de entrada pueden ser diferentes, porque esta manera de "etiquetar" a las personas dará como resultado la adición de caracteres adicionales al valor Cadena.

-No puedo simplemente hacer un "reemplazo" del texto que tengo la intención de reemplazar, porque puede haber otras instancias de ese mismo texto en otras partes del valor String.

Sé que es una publicación muy larga y confusa, pero espero que entiendas lo que quiero decir. Realmente necesito una solución y no quiero usar contenteditable, porque solo es para HTML5 y algunos navegadores más antiguos podrían no ser compatibles.

Suyo, Rei

Answer 1

espero que se haya podido llegar a, o encontrar una solución a su problema.Dado que no parece haber ninguno aquí, me gustaría ofrecer uno para cualquiera que pueda tropezar con esto (y usted si mi suposición era incorrecta).

Necesitará mantener datos de ubicación explícitos de cada mención existente en el textarea en el orden en que aparecen. Si, después de una modificación del contenido en textarea, se modifica la posición de una mención, deberá determinar qué aspecto de su valor, si corresponde, se usará para representarlo, y actualizar adecuadamente los datos de ubicación del mencionar.

Con tal colección de datos, resulta trivial construir el valor de mentionsHidden, aunque la existencia de tales datos hace innecesario el elemento.

Mentionator es una solución existente y robusta que adopta este enfoque al proporcionar la funcionalidad que está intentando recrear. Teniendo en cuenta que está bien estructurado, es fácil de seguir y se ha comentado abundantemente, debería ser útil para usted, ya sea como solución lista para usar o como material de referencia para citar a medida que despliega la suya propia. Lo mantiene tuyo verdaderamente :).