2012-05-28 14 views
5

Lo que intento hacer es algo similar a cómo funciona el editor colaborativo. Quiero permitir que dos personas editen el mismo documento. Y para esto tengo que simular un caret artificial. Puedo extraer la actividad del otro usuario en términos de sumar y eliminar en una ubicación específica en un área de texto.¿Cómo simular un caret artificial en un área de texto?

Transmitiré la ubicación junto con la acción al otro documento. Ahí tengo que llevar a cabo el cambio requerido en la coordinación enviada. He buscado y encontrado suficientes formas de establecer la ubicación de la intercalación e insertar o eliminar texto en la ubicación actual de la intercalación, pero el problema es que la marca del documento se mueve a la ubicación en la que realizo el cambio.

No quiero eso, quiero tener dos caretas, una para cada uno de los dos usuarios. Transmita sus cambios a cada uno de los documentos y realice los cambios en sus ubicaciones respectivas, mientras muestra dos descripciones diferentes.

Solo necesito saber si hay ciertas bibliotecas que puedo usar, o incluso si tengo que hacer esto por mi cuenta, entonces cómo y dónde empiezo. Ni siquiera sé cómo se representa un área de texto dentro de un navegador. ¿Cómo puedo caracterizar las ubicaciones dentro de un área de texto? Si lo sé, guardo las ubicaciones en la memoria y realizo los cambios en función de la información recibida.

Espero que tenga sentido, gracias por cualquier ayuda.

+1

No estoy seguro de si el área de texto es un buen punto de partida; tal vez puedas abusar de HTML5 Canvas para este proyecto y luego, de alguna manera, convertirlo a textarea o doc format, p. PDF o Word, que entre los que conozco, permite que el texto se agregue en áreas específicas con relativa facilidad. – Jake

+0

Pero si tengo que hacer un editor colaborativo, tengo que trabajar en el área de texto. Creo que puedo progresar si puedo averiguar cómo se especifican las ubicaciones dentro de un área de texto. Quiero decir, si tengo mi interés en la posición x mientras escribo, entonces ¿en qué términos se describe esta posición? – Sachin

+0

Es en términos del número de caracteres, ¿no es así? p.ej. si x es 24, entonces el cursor parpadea en el 24 ° carácter. ¿No? – Jake

Respuesta

1

Se podría imitar un acento circunflejo con un carácter especial y hacer la expresión regular para insertar el texto pareja y mover el cursor, y puedes usar el real. Este es el diseño más simple que puedo pensar. Para obtener la idead, puede usar la tubería | como símbolo artificial. pero esto podría entrar en conflicto fácilmente con el usuario insertar una tubería, para evitar esto puede utilizar una combinación poco común, o encontrar algún carácter Unicode para actuar como un símbolo de intercalación.

Una solución real pero mucho más complicada no es usar un área de texto, y usar un DIV. esto significa que debe manejar todos los eventos clave e insertar el carácter presionado manualmente en el documento, y registrar la posición del cursor. Pero de esta manera se puede insertar el número de símbolos de intercalación que no quieren sólo 2, algo como esto <span class="caret1"></span> puede hacerlo parpadear, estilo con css, tiene el color diferent para cada símbolo de intercalación, etc.

0

Ha intentado Draft.js, desde Facebook ? https://facebook.github.io/draft-js/

"Draft.js es un marco para la construcción de editores de texto enriquecido en reaccionar, impulsados ​​por un modelo inmutable y abstracción sobre las diferencias entre navegadores.

Draft.js hace que sea fácil de construir cualquier tipo de entrada de texto enriquecido , ya sea que solo desee admitir algunos estilos de texto en línea o crear un editor de texto complejo para componer artículos de formato largo.

En Draft.js, todo se puede personalizar: proporcionamos los bloques de construcción para que tenga completos control sobre la interfaz de usuario ".

Cuestiones relacionadas